色彩変化

Web


Warning: Attempt to read property "site_name" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 208

Warning: Attempt to read property "title" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 211

Warning: Attempt to read property "description" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 217

Warning: Attempt to read property "site_name" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 208

Warning: Attempt to read property "title" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 211

Warning: Attempt to read property "description" on bool in /home/goodhokkaido/sixwheel.net/public_html/muguruma/wp/wp-content/themes/frame/functions.php on line 217

GSAPを使って背景のグラデーションを変化させる

案件で、フルファネル・マーケティング戦略をコンセプトにするよう依頼があり、ファネルが上から下に展開する案を提案し、実装しました。その際に、ヒーローエリアで変化が欲しかったので、FNN Live News αっぽいグラデの変化ができないか調べたので、メモ。

GSAPでグラデを変化

そのものズバリが以下のサイトに掲載されています。やってみると簡単なんですが、複雑な動きにしようとすると、あんまりうまくいきません。そこそこの変化でそれっぽく見える調整が必要でした。でも、いい感じです。

ページによって変化させる背景が違うので、分岐処理していますが、基本的には上記と同じです。

  const bg1 = 'radial-gradient(circle at right bottom, rgba(255, 51, 140, 1), rgba(155, 51, 255, 1) 60%)'
  const bg2 = 'radial-gradient(circle at right bottom, rgba(155, 51, 255, 1), rgba(255, 51, 140, 1) 80%)'
  const heroScrolltxt = document.querySelector('.heroScrolltxt')
  const subPageBg = document.querySelector('.subPage__bg')

  if (heroScrolltxt) {
    bgChange(heroScrolltxt)
  } else {
    bgChange(subPageBg)
  }
  bgChange('.gNaviMenu')
  function bgChange (target) {
    gsap.timeline({ repeat: -1, yoyo: 'true', repeatDelay: 0 })
      .add(gsap.set(target, { background: bg1}))
      .add(gsap.to(target, { ease: 'none', duration: 6, background: bg2}))
        .play(0)
  }

コメント