w3 tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3 tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders
w3 tweaks
No Result
View All Result

Frontend Text Banner Animation

by CV
July 1, 2020
in Effects

Frontend Text Banner Animation developed using HTML, JS and CSS. In the demo you have the options to Change the animation durations.

RelatedPosts

CSS in CSS with a lot of C and S

Box Shadow Patterns

Masked & Skewed

Fit Text with CSS Variables

Buttons popper

CSS Flipping Text

See the Pen Frontend Community Banner Animation by LawrieCape (@Lawrie) on CodePen.

Created on March 5, 2020 Updated on March 5, 2020. A Pen by LawrieCape on CodePen. License

Find the source code below

index.html

<div class="container">
  <hgroup>
    <h1 class="featured-text">w3tweaks</h1>
    <h2>.com</h2>
  </hgroup>
</div>

script.js

/*
 * Very quick, very rough recreation of the JamHot 'Uncover Edinburgh' effect
 * https://www.thisisjamhot.com/work/uncover-edinburgh
 */

let wrappers, tl;

let config = {
  isDebug: false,
  speed: 10,
  credits: () => {
    window.open(
      "https://www.thisisjamhot.com/work/uncover-edinburgh",
      "_blank"
    );
  }
};

const gui = new dat.GUI();
const speedControl = gui.add(config, "speed", 0.1, 15);
const debugControl = gui.add(config, "isDebug");
gui.add(config, "credits");
speedControl.onChange(function(value) {
  anim(wrappers);
});

debugControl.onChange(function(value) {
  document.body.classList.toggle("debug");
});

function init() {
  const split = Splitting({
    target: ".featured-text",
    by: "chars"
  });

  split.forEach(splitInstance => {
    wrappers = duplicateChars(splitInstance.chars);
    anim(wrappers);
  });
}

function randRange(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

function duplicateChars(chars) {
  let wrappers = [];
  chars.forEach(el => {
    const wrapper = document.createElement("span");
    wrapper.setAttribute("class", "char-wrapper");
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);

    let clone = el.cloneNode(true);
    clone.setAttribute("class", "char char--clone");
    wrapper.appendChild(clone);
    wrappers.push(wrapper);
  });

  return wrappers;
}

function anim(letters) {
  if (tl) {
    tl.kill();
  }
  tl = new TimelineMax({
    paused: true,
    onComplete: anim,
    onCompleteParams: [letters]
  });

  letters.forEach((letter, index) => {
    const gotoY = `-${randRange(0, 5) * 2}0vw`;
    const speed = config.speed + Math.random();
    tl.to(
      letter,
      speed,
      {
        y: gotoY,
        ease: "power1.inOut",
        onComplete: () => {
          TweenMax.to(letter, 0, { y: "0" });
        }
      },
      0
    );
  });

  tl.play();
}

init();

scripts

Below are the plugins used to animate and splitting the texts. Find the plugins greensock, dat-gui and splitting

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');

html,
body {
  margin: 0;
  padding: 0;
  background-color: #ff5100;
  overflow: hidden;
}

.debug {
  background-color: hotpink !important;
}
.debug h1 {
  border: 1px solid black;
  overflow: visible;
}
.debug h2 {
  color: red;
  z-index: 2;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100vw;
  min-height: 100vh;
}

h1,
h2 {
  text-transform: uppercase;
  font-family: "Anton", sans-serif;
  text-align: center;
  margin: 0;
  position: relative;
  overflow: hidden;
}

h1 {
  font-size: 20vw;
  letter-spacing: 1vw;
  margin: 0;
  line-height: 3.1;
  height: 20vw;
}

h2 {
  font-size: 10vw;
  letter-spacing: 4.35vw;
  padding-left: 2.8vw;
}

.char-wrapper {
  position: relative;
  display: inline-block;
}

.char {
  display: inline-block;
  position: relative;
  height: 20vw;
}

.char--clone {
  position: absolute;
  top: 60vw;
  left: 0;
}

.char:before,
.char:after {
  content: attr(data-char);
  position: absolute;
  left: 0;
  height: 20vw;
}

.char:before {
  top: -100%;
}

.char:after {
  bottom: -100%;
}

.dg.a.main {
  margin-right: 0;
}
Tags: text effects
Previous Post

15 CSS Sliders

Next Post

Unicycle Range Slider

Related Posts

CSS in CSS with a lot of C and S
Effects

CSS in CSS with a lot of C and S

October 12, 2020
Box Shadow Patterns
Effects

Box Shadow Patterns

October 1, 2020
Masked & Skewed
Effects

Masked & Skewed

September 30, 2020
Fit Text with CSS Variables
Effects

Fit Text with CSS Variables

September 29, 2020
Buttons popper
Effects

Buttons popper

September 21, 2020
CSS Flipping Text
Effects

CSS Flipping Text

July 9, 2020
Next Post
Unicycle Range Slider

Unicycle Range Slider

Discussion about this post

Popular Posts

41 Multi step HTML forms

92 CSS Text styling and Effects

99 Hand-picked CSS Card Collections

20 HTML & CSS pricing tables

11 CSS Shopping Cart UI/UX

76 Hand Picked CSS Music Players

14 CSS Divider Collections

Simple php login and logout script using php session and database using MySQL

Tags

Angularjs (20) AngularJS Tutorials (16) animation (70) animation examples (14) beautiful (12) Button (24) button hover effect (15) Buttons (24) Calendar (38) calendars (38) cards (24) click animation (12) click buttons (19) CSS (128) css3 (20) css buttons (54) css calendar (36) css calendars (37) css effects (22) css hover effects (31) demo (18) effect (33) effects (41) essentials (48) free (12) Free Tool (13) hover (23) hover animation (31) Hover effects (40) html (86) inputs (14) Javascript (68) jquery (26) js (18) loaders (14) menu (13) mouse hover effects (36) navigation (14) pure (13) simple (13) text effects (24) tool (12) tutorial (32) tutorials (14) YouTube (13)
No Result
View All Result
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Web Tools
    • Beautifiers
    • Minifiers
    • Encoders & Decoders

© 2020 w3tweaks

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist