►
From YouTube: Scroll Reveal Module for Backdrop CMS
Description
This module helps you animate the reveal of specific page elements as you scroll down the page. This video shows you how it works and how to configure it.
* ScrollReveal comes from the heart of @jlmakes.
* Ported to Backdrop CMS by Biolithic (https://github.com/biolithic).
* Maintainer for the Drupal module: Hatuhay (https://www.drupal.org/u/hatuhay).
* Current Backdrop maintainers: Peter Anderson (https://github.com/bwpanda) and Laryn Kragt Bakker (https://github.com/laryn) - CEDC.org.
A
Hello
welcome.
My
name
is
tim
erickson,
I'm
here
with
simplo
by
triplo,
and
today,
we're
going
to
talk
about
the
scroll
reveal
module
the
nice
little
javascript
library,
module
that
helps
add
some
animation
and
effects
to
the
your
website.
Okay,
the
scroll
reveal
module,
like
all
the
other
modules
can
be
found
on
backdrop.
Cms.Org
at
project
slash
scroll
reveal
for
our
demo.
Today
I
have
a
simple
backdrop
site
and
I
have
downloaded.
A
The
scroll
reveal
module
and
the
sample
content
module
this.
So
what
we're
going
to
do
is
quickly
enable
these
two
modules,
okay,
with
the
two
modules
enabled,
if
you've
seen
some
of
my
other
videos,
you've
seen
these
sample
animal
nodes
before
and
they
are
all
showing
up
here
on
the
front
page
as
individual
nodes,
the
scroll
reveal
configuration
is
found
here
under
configuration
user
interface.
Scroll
reveal.
A
This
does
require
a
little
bit
of
understanding
of
sort
of
how
to
get
classes
from
your
markup
for
your
page
in
order
to
use,
but
on
the
whole,
it's
not
too
hard
a
module
to
use.
So
what
we're
going
to
do
to
start
with
in
our
example,
is
create
a
special
effect,
as
you
reveal
these
various
nodes
on
the
front
page
to
get
started,
we
need
a
javascript.
Selector
is
what
they
were
looking
for.
In
other
words,
just
if
you
do
any
theming
just
a
class.
A
So
what
I'm
going
to
do
is
I'm
going
to
right
click
on
one
of
these
nodes
here
and
I'm
going
to
look
for
and
on
the
right
side
here,
I'm
going
to
hover
over
and
try
to
find
the
the
basic
element
that
I
want
to
target
for
this
effect,
and
for
those
of
you
who
aren't
aware
what
I'm
using
are
the
developer
tools
built
into
firefox
or
chrome?
Any
of
the
the
major
browsers
have
developer
tools
that
allow
you
to
get
in
and
look
at
your
code
like
this.
A
I
can
see
here
that
each
of
these
articles
is
inside
of
a
div,
but
the
class
that
I
can
use
would
be
say
view
mode
teaser,
that's
a
class!
That's
going
to
be
common
to
each
one
of
these
elements
that
I
want
to
animate.
So
I'm
going
to
go
ahead
and
close
this
I'm
going
to
remember
view
mode
teaser
and
now
I'm
going
to
go
to
configuration
user
interface,
scroll
reveal
and
say
view
mode,
teaser
and
the
example
shows
a
dot
at
the
beginning.
That's
how
we
often
indicate
a
class.
A
What
I
could
have
also
done
is
something
to
indicate
the
front
page,
although
I
think,
if
we
go
down
here,
I
also
have
pages
visibility,
so
I
can
say
only
only
show
this
on
the
front
page
is
the
only
place.
I
want
this
effect
to
happen,
so
I'm
going
to
go
ahead
and
pick
that
and
I
don't
think
I'm
going
to
do
anything
else
to
start
with,
I'm
just
going
to
hit
that
hit,
save
we're
going
to
go
to
the
home
page
and
boom.
A
A
A
A
This
is
probably
not
a
practical
effect,
but
it's
something
you
can
do.
Let's
go
back
to
user
scroll
and
we're
going
to
go
ahead
and
change
this
set
this
back
to
about
600
or
even
800.
I
found
that
to
be
a
little
less
than
a
second,
it's
a
good
time.
We
can
also
do
things
like
set
a
distance
of
700
pixels,
and
this
is
just
going
to
affect
the
amount
of
movement.
A
A
A
A
A
A
Let's
do
one
more
thing
enough
play
with
the
opacity
and
let's
do
like
a
point
two
five.
This
is
a
value
related
to
one.
One
is
a
full
opacity:
zero
is
totally
transparent
and
go
ahead
and
hit
save
now
we're
seeing
that
it's
also
it's
fading
from
light
to
dark,
as
well
as
rotating
anyways.
Let's
go
back
and
do
one
more
that
set
this
to
something
that
might
actually
be
a
little
more
realistic
or
something
we
might
actually
use
on
our
website.
A
I'm
going
to
get
rid
of
well,
I
don't
know
I'm
going
to
leave
10
on
the
rotate
c.
Have
it
do
just
a
little
bit
of
an
angle,
we're
going
to
speed
this
up
about
800
is
what
I
have
found
is
good
and
let's
just
set
that
to
300
pixels.
I
think
that
might
work,
and
this
might
be
a
little
bit
more
of
a
kind
of
a
realistic
effect
that
you
might
do
in
building
your
website.
A
You'll
notice
that
it
only
happens
the
first
time
we
need
to
refresh
the
page
to
get
this
effect
to
re-happen
it'll
happen.
Once
for
each
thing,
there
is
a
setting
here
that
will
reset
if
we
set
that
to
true-
and
we
go
back
to
the
home
page
now
we're
going
to
see
that
as
we
scroll
down
those
move
as
we
scroll
up,
they
move
again
and
they
keep
moving
each
time.
So,
there's
a
whole
number
of
settings
here,
we're
not
going
to
go
through
them
all
right.
A
A
A
A
A
Let's
also
do
we
can
set
these
custom
settings
for
each
one.
So
I'm
going
to
set
this
one
for
really
slow
like
we
did
before
and
instead
of
doing
a
y-axis.
Let's
do
an
x-axis
rotation
so
now
boom
the
line
came
in
like
it
did
before,
but
as
we
get
down
to
the
elephant,
we're
going
to
see
a
completely
different
effect
that
specifically
targeted
the
elephant,
so
you
can
target
as
many
different
elements
as
you
want
with
different
configurations
for
each
for
each
one.
A
Although
this
the
page
and
theme
visibility
is
going
to
affect
all
of
your
different
selections
or
all
of
the
different
elements
so
anyways,
I
think
this
is
a
really
fun
module
to
help
add
some
effects
to
your
pages.
I
warn
you
not
to
overuse
it.
I'm
not
a
big
fan
of
overly
animated
pages,
but
some
little
subtle
effects,
I
think,
are
really
nice
and
can
really
spice
up
your
page
a
bit.
So
that's
it
for
today,
thanks
so
much
for
joining
us
and
we'll
see
you
in
the
next
video.