On Scroll Animation Layout Effect
Hello Fellas,
I create a static web page using simple HTML, CSS & Jquery, which show some cool animation effects on the web page when the user scrolls the page automatically shapes & overlay move on the screen. that section you can use to show your "Team Members",
"Services you provides" & many more.
Using HTML, CSS & Jquery create an animated layout. "Square" & "Circle" shapes are created using the pseudo-element "after & before". when scroll page then scrolls reach on specific position animation effect seen in current section. "Square" & "Circle" shape moving its position & dark overlay is seen in the image.
using display:table in parent div "our-work-wrapper" & "image-section , text-wrapper" div have display:table-cell & width:50% for devide section in two-part,one for image & second for content."verticle-alignment: middle" set content in the horizontal middle in the div tag."content div" has heading & paragraph to show detail in our work section image have "dark overlay" which is created using pseudo-element.it shows when the scroll bar gets it's to section-specific position then lovely shown in the image.i give all 6 section with unique name like first-section,second-section etc.for when scroll bar moves on specific section position each section add "show-animation" class in its parent div. I create 6 different jquery for all sections to add the "show-animation" class add-in specific position.
use "IBM Plex Sans" & "Dancing Script" font family in layout which I use the direct link from . all images & content are free resources used in layout design.
- all the design & layout created in 1920 x 1080 screen size.
- all the design & layout is responsive in desktop view.
- all the content, fonts & image are free resources.
