Angul

arscr
oll
e ect
Apr
ojectbyEl
ias.
L

Greetingsdeveloper
!MynameisEl
iasandI’m adesigner
.Rightnow I
’m bui
ldi
nganappf
or
f
oot ballr
esul
ts.Theappi
sbui
lti
nangular(
html ,css&typescri
pt).

Inoneofmycomponent
sI’l
lneedyourhel
ptocr
eat
eane ect
.Thee ecti
sfai
rl
ysi
mpl
e,and
shoul
dn’tr
equi
remuchti
me.

Thi
ssmal
lpr
ojectwi
ll
wor
kasf
oll
owi
ng:

1.I
wil
lexpl
ainyouthescope,andt
rytogi
veyoui
nst
ruct
ions
onwhatexactl
ythatneedstobedone.

2.We’
llagr
eeonat
imef
rameandbudget
.

3.
I’l
lsendyout
hesour
cecodeoft
hepr
ojectr
egar
dingt
oyourpr
efer
ence

4.Youwr
itet
hecodeandsendi
ttomef
orr
evi
sion

5.OnceI
’veappr
ovedt
hecode,t
hepr
ojecti
sfini
shedandyou’
llgetpai
d.

Ont
henextpageI
’l
lexpl
ainwhatI
wantt
ogetdone:
Angul
arscr
oll
e ect
Apr
ojectbyEl
ias.
L

SowhatI needtogetdoneisthatIwantt
ocr
eateascrol
le ectwithi
nmycomponentt
hat
happendsgradual
ly.Thee ectisnotnor
malscr
oll
behavi
our,sot
ypescr
iptneedst
obe
writ
tentomodifythescrol
lbehaviour
s.

Thi
sishow Iwantmycomponentt
olookl
ikeaf
ter
Thi
sishow mycomponentl
ooksr
ightnow: thescr
oll
ingiscompl
eted:

#1 #2

Thee ectshoul
dgr
adual
lyhappenast
hescr
eenshot
sar
eshownbel
ow: #3
Angul
arscr
oll
e ect
Apr
ojectbyEl
ias.
L

Asexpl
ainedont
hepr
evi
ouspage,
thenor
mal
scr
oll
behavi
oursomewhatneedst
ogetmodi
fied.

Mygoal wi
ththispr
ojectisthatt
heor i
ginal
componenthaveonest i
ckyandflexi belpart
andonefixedandscr ol
lablepart.Theparts
aredi
videdin2.Seebelow:

Bydefault,t
hispartshoul
donlyscrol
lonce
thecontentpartscrol
l.Whenyouscroll
,it
goestothevisionstat
egradual
ly.

I
fyouscrol
lrever
se,
i
tshoul
dgobackt oi
tsor
igi
nal
stat
e.
Angul
arscr
oll
e ect
Apr
ojectbyEl
ias.
L

Thee ectcanbequit
etr
ickytoexplai
nful
ly,butI’veat
tachedavideoofanot
herappt
hat
havesol
vedthi
sprobl
em.Alsopleaseseescreenshotsfr
om thatappbel
ow:

#1 #2 #3

#4 #5