issuhub.com

net - UK (2020-05)

(Antfer) #1

Transition states


As part of the tutorial code, we have included some code that

makes use of intercepting the link to an anchor on the page.

The code then smoothly animates the transition of the page down

to this – because it is handled by the animation it provides a way

to create a more seamless experience for the user. The buttons are

doing the work, hence a cognitive offload for the user, with a pay

off that the animation between states occurs. To add to this, the

browser’s history is also updated so that if the user clicks the back

button it continues to work as expected.

There are many other solutions to this problem and many

scrolling libraries that can also be used just to make it even easier.

MoveTo.js (https://github.com/hsnaydd/moveTo) is a fantastic

library to use as it’s easy to implement with the inclusion of the

library code that’s available through a CDN. What makes this a

great consideration is that there are a number of configurable

options that help get more unique results such as easing, duration,

container and a callback after the animation has finished.

Probably the easiest library is smooth-scroll.js (https://github.

com/cferdinandi/smooth-scroll) because it requires the least work.

It’s a one-line implementation and it will just pick the native ‘#’ link

of an anchor.

Whichever solution it is that you pick, you will get the same

result – smooth scrolling. It’s just a matter of how much control

you wish to retain.

IN-DEPTH

The library moveTo.js gives a great number of configurable options that enable your

content to move up and down smoothly

SMOOTH SCROLLING


SOLUTIONS





src=”img/background.png”>


THE
ROCKIES







The main area of focus to consider here is that
any content with the class of ‘rellax’ added will be
animated into place, the speed of that animation
takes place through the property of ‘data-rellax-
speed’. Negative numbers move the content slower
than the speed of the scroll and vice versa. The
structure of content is straightforward, with a div
holding each layer. This contains either an image or
text. This is kept simple with a background sky, a
background and foreground image and text, to give
a layered look.



Just above the JavaScript tags, add the tag above,
which brings the rellax.js library into the project.


var rellax = new Rellax(‘.rellax’, {
callback: function(position) {
console.log(position);
}
});


Adding the code above makes the rellax library
work by querying all instances of the class and
applying the movement. There’s a function here
that enables seeing the screen position of objects
in the console, which can be useful for working out
CSS placement.
There’s more JavaScript included and this allows
for content to smoothly scroll if the buttons are
clicked instead. Save the HTML page and move
over to the ‘design.css’, all code can be added right at
the top of this file. All of the different breakpoint
code has been included, meaning we’ll focus on HD
desktops in the code here.


.wrapper {
position: relative;


“The problem here is that not


all screens are the same ratio


and that causes a lot of issues


for the content”

Free download pdf
Get our desktop app
Company
Features
Documentation
Resources
© ISSUHUB. 2024. All rights reserved.