delay: offset2,
duration: 800,
easing: “easeOutBack”
});
});
}, 100);
setTimeout(function() {
var $spans = $(“#bottom”).find(‘span’);6. Add final letters
Now the final letters are moved into place. This gives the same effect as Patrick Heng’s site, which has layers of text moving. Patrick actually uses WebGL to move the text but this is a simpler way with DOM elements.
$spans.each(function() {
offset3 += 40;
$(this).velocity({
translateY: -100,
opacity: 0.8
}, {
delay: offset3,
duration: 800,
easing: “easeOutBack”
});
});
}, 150);Learn more at Generate London
Richard Rutter has a love and fascination for typography and co-founded Fontdeck, a pioneering web font service. As a self-appointed web typography evangelist, Richard is chief organiser of Clearleft’s Ampersand web typography conferences.
At Generate London 2018, his workshop will help you create websites with engaging, appropriate, distinctive, expressive and readable web typography, which adapts for screens of all shapes and sizes. You will learn how to combine centuries-old craft with cutting-edge technology – including variable fonts – in order to design and develop the best experiences for your readers.
Over the course of a day, you will participate in hands-on activities, applying each new technique to a detailed example site which you can take back with you. This will form the perfect resource for you to refer to in the future. And if that’s not enough, every attendee will walk away with a free electronic copy of Richard’s acclaimed Web Typography book.
Don't miss out, get your ticket now
Related articles:
