JavaScript >> Javascript 文檔 >  >> Tags >> CSS

帶有 jQuery 和 CSS 的霓虹文字效果

Tutorialzine 是網絡上一些最好的 Web 開發教程的所在地。我們的重點主要放在 Web 開發的編碼方面,但通常創建一個好的設計也同樣重要。

這就是為什麼今天我們要在網站上做第一個教程,它既面向設計又面向代碼,為您帶來完整的 Web 開發體驗。在下面的評論部分分享您對這種新格式的看法。

第 1 步 - 設計

今天我們正在使用 CSS 和 jQuery 創建霓虹發光文本效果。實現此效果的第一步是創建一個背景圖像,其中包含兩個略有不同的文本版本。 jQuery 在這兩個版本之間淡入淡出,創造出平滑的過渡效果。

要創建彩色背景圖像,您首先需要打開一個新的 Photoshop 文檔 650px 寬和 300 像素 高,背景顏色為 #141414 .用你最喜歡的字體寫你的標題。我使用的是 60px 大小的 Century Gothic。

在此之後 Ctrl 並單擊圖層面板中文本圖層的圖標以將其選中。

使用矩形選框工具 同時按住 Shift+Alt 將選擇限制為文本的單個單詞。

選擇所有內容後,創建一個新圖層,將其命名為 gradients 並通過單擊使其激活。

選擇漸變工具 從工具箱中,並使用上面討論的技術對單詞一一著色,以在各個單詞之間切換選擇。這些選擇限制了漸變工具的效果以及“漸變 " 圖層是當前活動的圖層,工具所做的所有更改都保存在那裡。

完成標題後,將其複製到原始下方並應用一組不同的漸變。將兩個版本的彩色標題上下對齊,以便在 CSS 部分中簡單地為背景圖像的位置提供不同的值,從而輕鬆地在它們之間切換。

你可以找到 PSD 我在 下載存檔 中為本教程創建的文件 .

第 2 步 - XHTML

XHTML 標記非常簡單,您只需要一個容器(#neonText H1) 包含兩個版本的背景。

demo.html

<h1 id="neonText">
    Neon Text Effect With jQuery & CSS.
    <span class="textVersion" id="layer1"></span>
    <span class="textVersion" id="layer2"></span>
</h1>

第 1 層 如上圖layer2 ,並降低其不透明度將創建一個平滑的霓虹燈發光效果,因為它下面的跨度的背景圖像淡入視野。

出於 SEO 的原因,我們還以純文本形式提供圖像內容。它以否定的 text-indent 巧妙地隱藏在視圖之外 .

第 3 步 - CSS

效果使用的樣式也非常簡單。這兩個 span 共享我們在第一步中所做的相同背景圖像,但是通過指定不同的背景位置,我們只顯示圖像的頂部或底部。

styles.css

/* The two text layers */
#neonText span{
    width:700px;
    height:150px;
    position:absolute;
    left:0;
    top:0;

    background:url('img/text.jpg') no-repeat left top;
}

span#layer1{
    z-index:100;
}

span#layer2{
    background-position:left bottom;
    z-index:99;
}

/* The h1 tag that holds the layers */
#neonText{
    height:150px;
    margin:180px auto 0;
    position:relative;
    width:650px;
    text-indent:-9999px;
}

#neonText 容器是相對定位的,因此它內部的絕對定位跨度恰好一個在另一個之上。還要注意負文本縮進,我們用它來隱藏容器的內容。

第 4 步 - jQuery

最後一步涉及設置過渡動畫。當我們使用 jQuery 庫(我們在頁面中包含一個腳本標籤)時,可以使用幾個有用的方法——fadeIn 和 fadeOut,我們使用下面的代碼。

script.js

$(document).ready(function(){

    setInterval(function(){

        // Selecting only the visible layers:
        var versions = $('.textVersion:visible');

        if(versions.length<2){
            // If only one layer is visible, show the other
            $('.textVersion').fadeIn(800);
        }
        else{
            // Hide the upper layer
            versions.eq(0).fadeOut(800);
        }
    },1000);

});

setInterval 裡面的函數 語句每秒執行一次,顯示或隱藏第一個跨度層。

有了這個,我們光滑的霓虹燈效果就完成了!

結論

您可以使用此效果來更新您的設計,同時仍保持頁面的 SEO 價值。我相信你能想到這段代碼的許多有趣的用途和修改。請務必在下面的評論部分與社區分享您所做的事情。


Tutorial JavaScript 教程
  1. 將您的圖標與 Figma API 同步

  2. 🛑 停止思考 React 生命週期方法。

  3. 掌握 Node.js 核心模塊——流程模塊

  4. 為什麼我的 intersectionObserver 將我的 querySelect 返回為未定義?

  5. pdf中的難題是如何通過創建它來解決的

  6. 快速輕鬆地將 Calendly 添加到您的 React 網站。

  7. 如何向 Vue.js 應用程序添加迷你圖

  1. JavaScript 圓法 | Up-Down,最多十進制示例代碼

  2. Angular 模板驅動表單的實用指南

  3. 使用 Array.reduce 轉換數據

  4. 我可以在我的網站上顯示餅圖嗎? - 介紹 Recharts

  5. tsParticles 1.37.0 發布

  6. 帶有 Next.js 路由的活動導航欄

  7. 如何使用 React、Redux 和 SCSS 為您的應用程序設置主題

  1. 像專業人士一樣處理 Promise 😎

  2. 使用來自 ASP.NET MVC 和 Razor 的服務器端數據引導 AngularJS 應用程序

  3. Javascript 測試驅動開發簡介:第 2 部分

  4. 如何在 10 分鐘內使用 React setState() 成為專業人士