創建滾動指針動畫

Question

我想創建一個效果，當您滾動圖像時指針將指向它。同樣在這個網站大約按下一半用於：https://thecleansekitchen.com.au/

我不知道從哪裏開始，或者有任何的JQuery或插件了那裏，但我無法找到任何？

任何幫助表示讚賞。

Answer 1

我確信有一些jQuery插件可以做到這一點，但這可能是不必要的。您可以使用一些基本的HTML，CSS和JavaScript輕鬆完成此操作。

我創建了一個JSFiddle來嘗試幫助您開始。 https://jsfiddle.net/x823m6ff/

請注意，以上是非常粗糙的，你一定要按摩它的需要，但希望它會幫助你開始正確的道路。

我會在這裏列出代碼並解釋。

HTML：

<div class="container"> 
    <div class="block"> 
     <div class="arrow arrow-down"></div> 
    </div> 
    <div class="block"> 
     <div class="arrow arrow-down"></div> 
    </div> 
    <div class="block"> 
     <div class="arrow arrow-down"></div> 
    </div> 
</div> 

對於HTML，我創建了一個容器三個區塊（如您的截圖）。每個塊都有一個通過CSS隱藏的子元素arrow。

CSS：

.container { 
    width: 960px; 
    margin: 0 auto; 
} 

.block { 
    width: 100px; 
    height: 150px; 
    background-color: #000; 
    float: left; 
    margin-right: 20px; 
    position: relative; 
} 

.arrow { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 25%; 
} 

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: 25px solid transparent; 
    border-right: 25px solid transparent; 

    border-top: 25px solid #FFF; 
} 

的CSS設置了一些寬度和高度爲我們的塊並創建箭頭元素。我們將這些箭頭元素相對於每個塊放置並放置在每個塊的頂部中間。

的JavaScript：

$(document).ready(function() { 
    $('.block').hover(function() { 
     $(this).find('.arrow').show(); 
    }, function() { 
     $(this).find('.arrow').hide();   
    }); 
}); 

以上的JavaScript非常簡單，基本上只是在我們的塊監聽鼠標懸停並根據用戶的鼠標移動到塊的狀態顯示/隱藏我們的箭頭。