$(document).ready(function(){ $(window).scroll(function() { if($(this).scrollTop() > 100) { // 100pxスクロールしていたら上に戻るボタンを表示 $(".back-to-top").fadeIn(); } else { $(".back-to-top").fadeOut(); } }); $(".back-to-top").click(function() { $("body,html").animate({scrollTop:0},800); // 800msかけて上に戻る });});
<div class="bg-image-loop"></div>.bg-image-loop { width: 100%; height: 160px; /* 画像の高さを指定 */ position: relative; background: url("//onocom.net/code/wp-content/uploads/2018/01/loop_bg.png") repeat-x 0 0; background-size: auto 100%; animation: bg-slider 23s linear infinite; /* 23sの部分背景画像の約数だとスムーズ */ margin: 80px 0; padding: 0;}@keyframes bg-slider { from { background-position: 0 0; } to { background-position: -1518px 0; } /* 1518pxとは使用した背景画像の長さ */}
<p class="scroll-announce">下にスクロールしてね</p>body { background: #000; color: #fff; min-height: 1000px;}.scroll-announce { text-align: center; position: relative;}.scroll-announce:after { font-size: 40px; font-weight: bold; display: block; text-align: center; content: "↓"; position: absolute; left: 50%; left: calc( 50% - 24px ); bottom: -100px; width: 48px; animation: scroll-announce 3s ease infinite;}@keyframes scroll-announce { 0% { transform:translateY(0) } 70% { transform:translateY(-15px) } 100% { transform:translateY(0) }}