The container could hold the image on its own as a background image but there are known issues in Safari with a CSS property we’re using: “background-attachment: fixed”. Notice we have a container for the image and content. Step 1: Mark-upĬhoosing descriptive class names helps when going back and maintaining your code. There are a number of plugins available that can do the same effect for us but in our opinion, they are over-complicated for this simple task.Īlso, there might be a number of ways this effect can be achieved and we only show one of them so other designers and developers might have a different idea of how this should be done. We will not be using any javascript for this simple effect. ![]() How to give your website some depth by creating a simple parallax effect Other websites who have taken it to another level Here are some sites we’ve built with different levels of parallax: Can be used in before/after sections meaning it can be used to break up big sections of text/imagery so the user doesn’t feel like they’re reading an endless post.Įxamples of websites who've used it effectively.Can be used to present statistics such as this Under the ‘How social are law firms - social icons' section’.The effect is visually pleasing for some, it creates a nice optical effect which consciously or subconsciously can make the page more appealing to the reader.It’s the effect of 2 layers scrolling at different speeds in the same viewpoint. Usually, an image scrolls slower or not at all in the background. It’s a visual effect designed to give greater depth to the website and to help engage the user with the content.Īs the user scrolls down a page the content moves at the same time. Parallax can help to bring pages to life and make it more attractive. ![]() ![]() Having a basic text and image content site can be uninspiring for users. Just a couple of lines of code will give an effect that will excite people who come to the page, increase engagement and ultimately increase conversions. The best thing about CSS effects is that they are so simple to put in place if you want an image or content to move as the user scrolls down a page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |