前提・実現したいこと
jQueryでスクロール時に横や下から要素がフワッと表示されるようにしたくて、delightersというスクリプトを使用し実装しました。
アニメーション自体は成功しましたが、スクロールするたびに実行されるので処理が一度だけ実行されるようにしたいです。
該当のソースコード
HTML
1<div data-delighter class="delighter left"> 2 <h3>タイトル</h3> 3 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 4</div>
CSS
1/* 基本のスタイル */ 2.left.delighter { 3 transition: all 1s ease-out; 4 transform: translateX(-100%); 5 opacity: 0; 6} 7 8/* スタート時のスタイル */ 9.left.delighter.started { 10 transform: translate(-5%, 0%); 11 opacity: 1; 12} 13 14/* エンド時のスタイル */ 15.left.delighter.started.ended { 16 transform: translate(0%, 0%); 17}
JavaScript
1var Delighters = new (function() { 2 var self = this, 3 dels = this.dels = [], 4 5 // default options 6 options = { 7 attribute: 'data-delighter', 8 classNames: ['delighter', 'started', 'ended'], 9 start: 0.75, // default start threshold 10 end: 0.75, // default end threshold 11 autoInit: true // initialize when DOMContentLoaded 12 }; 13 14 document.addEventListener("DOMContentLoaded", function() { 15 if (options.autoInit) init(); 16 }); 17 18 function config(opts) { 19 for (var name in opts) options[name] = opts[name]; 20 } 21 22 function init() { 23 document.addEventListener('scroll', scroll) 24 var els = document.querySelectorAll('[' + options.attribute + ']'); 25 26 for (var i=0; i<els.length; i++) { 27 var el = els[i], 28 def = el.getAttribute(options.attribute, 2), 29 pairs = def.split(';'), 30 del = {}; 31 del.start = options.start; 32 del.end = options.end; 33 34 for (var j=0; j<pairs.length; j++) { 35 var pair = pairs[j].split(':'), 36 name = pair[0], 37 val = isNaN(pair[1] * 1)? pair[1] : pair[1] * 1; 38 if (name) del[name] = (val === undefined)? true : val; 39 } 40 41 del.el = el; 42 del.id = dels.length; 43 dels.push(del); 44 el.classList.add(options.classNames[0]) 45 if (del.debug) el.style.outline = 'solid red 4px'; 46 } 47 scroll(); 48 } 49 50 function scroll() { 51 var viewportHeight = window.innerHeight; 52 for (var i=0; i<dels.length; i++) { 53 var del = dels[i], 54 box = del.el.getBoundingClientRect(), 55 factorStart = box.top / viewportHeight, 56 factorEnd = box.bottom / viewportHeight; 57 58 if (del.debug) { 59 if (factorStart >= 0 && factorStart <= 1) { 60 if (!del.startLine) { 61 del.startLine = document.createElement('div') 62 document.body.appendChild(del.startLine); 63 del.startLine.style = 'position:fixed;height:0;width:100%;border-bottom:dotted red 2px;top:' + (del.start * 100) + 'vh'; 64 } 65 } 66 if (((factorEnd < del.end) || (factorStart > 1)) && del.startLine) { 67 del.startLine.parentNode.removeChild(del.startLine); 68 delete del.startLine; 69 } 70 } 71 if (factorStart < del.start && !del.started) { 72 del.started = true; 73 del.el.classList.add(options.classNames[1]) 74 } 75 else if (factorStart > del.start && del.started) { 76 del.started = false; 77 del.el.classList.remove(options.classNames[1]) 78 } 79 if (factorEnd < del.end && !del.ended) { 80 del.ended = true; 81 del.el.classList.add(options.classNames[2]) 82 } 83 else if (factorEnd > del.end && del.ended) { 84 del.ended = false; 85 del.el.classList.remove(options.classNames[2]) 86 } 87 } 88 } 89 90 self.init = init; 91 self.config = config; 92})();
試したこと
optionsのautoInitをfalseにしてみましたが、表示されなくなってしまいました。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/03 03:09