JavaScriptJavaScriptライブラリ「TweenMax」の使い方を勉強していました。最近流行りのスクロールに合わせてしゅるしゅる要素が表示されたりうごいたりする効果がやりたくてですね...みんな何でやってるんだろう、と見てみると大体これですね!私がやりたいスクロールに合わせて...というのは少しひと手間かかるので、まずは普通にアニメーションをしゅるしゅるさせるデモを作ってみました。上記のファイルを設置したいフォルダに入れていきます。head内にcdnでtween.max.jsを読み込みます。jqueryはなくても動きます。src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>jsの記述TweenMax.to(指定した要素に変化)一番基本のやつで、シンプルに指定した要素に変化します。#circle1のところは任意のidやclassでどうぞ。}の変化をさせる...という指定をしています。ご覧の通り、色を変えたり、シャドウをつけたり、XYで位置を変化できたりします。デモはこちらTweenMax.from(指定した要素から初期状態へ戻る)指定した要素から戻ります。これはどう使っていいのか、使いどころがよくわかりません。}の変化から戻る...という指定をしています。デモはこちらTweenMax.fromTo(指定した初期値→指定の値へ変化)上二つが合体したもの。初期値を設定でき、そこから変化させる効果です。これは使いやすそうですね。デモはこちらTweenMax.staggerFromTo(複数の指定した初期値→指定の値へ変化)複数指定可能な.staggerと基本のやつが組み合わさったもの。「TweenMax.staggerTo」「TweenMax.staggerFrom」もありますが、使いやすいので「TweenMax.staggerFromTo」のデモのみ掲載。「猫の写真(.move_nuko)」を「0.5秒かけて」「opacity:0」から「opacity:1」へ、0.7秒ごとに変化...という指定をしています。デモはこちらこれは理想のしゅるしゅるアニメーション!これをやりたかった!!この効果をちょっと加えるだけでもおしゃれなサイトになりそうですね。これでは終わらんよ...私がやりたいのは「スクロールにあわせて」この効果を付与していくことなのですが...つまりこの要素が表示された瞬間に...みたいな指定が必要になるわけですね。自分で書けないよ~...ということで、この「TweenMax」とあるjsを組み合わせることでそれも可能になるようです。次の記事では、その「TweenMax」ともう一つのjsの合わせ技を勉強したいと思います。「fancybox3」と「Masonry.js」で可変するおしゃれギャラリー(デモあり)同人誌の表紙などにオススメの「数式フォント」bxsliderを使ったtickerスライダー(デモあり)雪とか氷とか色々降らせる「snowfall.jquery.js」(デモあり)スクロールをするとかっこよく要素が出てくる「jquery.inview.js」(デモあり)TAGJavaScriptjQueryWordPressフォントABOUTAki関西の制作会社に勤めるWEBデザイナー。趣味で漫画を描いています。