In this article I am going to explain how to arrange given set of elements on Sin or Cos With CSS3 and SASS.
Lets see Math formula for Sin wave.
X = X -coordinate
Y = Y -coordinate
A = Amplitude
P = Period
Y = A sinθ
X = P ( increment X periodically)
Lets see Math formula for Cos wave.
Y = A cosθ
HTML markup of 43 div elements :
<div></div> <div></div> <div></div> ......40 more divs
SASS code :
This below code will apply Left and Top positions based on nth-child property.$class: div !default $amp: 100 $period: 20 $angle: 30deg @for $i from 1 through 43 #{$class}:nth-child( #{$i} ) left: #{$amp + ( $period * ($i - 1) ) }px top: #{$amp + ($amp*sin( ($i - 1) * $angle)) }px div width : 5px height : 5px border : 1px solid #ccc position : absolute background-color : #ff0000
0 comments:
Post a comment