From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we want to share some inspiration for article intro effects with you. You have surely seen some interesting article headers, usually containing a fullscreen image, that have some sort of intro effect, i.e. where some creative transition happens when scrolling or when clicking on a button to continue. We wanted to explore the effect possibilities with fullscreen images and making something happen when continuing to the article body. There are many potentially cool effects and today we want to share just a couple of ideas with you.
One really nice effect that we tried to imitate, is the one seen on Jam3 when choosing a project. There, a fullscreen video is being animated to a narrow bar while the content slides in.
Most of the effects we tried are highly experimental; animating large images can become a bit sluggish, also because a couple of transitions happening at the same time. The effect gets triggered when scrolling begins or when the button is clicked.
Note that hijacking the scroll is really not a great thing to do, so restricting it to a really short period is essential when deciding to use such an invasive method. We are using it here because of demo purposes only, but please keep in mind that it’s not an elaborate solution at all. We are not throttling the scroll handler, something you should definitely do in case you want to use something like this on scroll. Note that the effects can be applied when clicking a button, also. Or you could use something like parallax scrolling for a gradual effect.
The images in the demos are from amazing Unsplash, a fantastic place to find high-quality public domain photos.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The first effect pushes the image to the top together with the title, and a new title element slides in with the content.
The second demo shows the effect that fades out the image at the bottom and fades in the resting content. We do this by using a pseudo element with a linear gradient.
The third effect slices the main image into two where the first half moves up and the second one slides down, giving space for the title to enlarge.
The forth effect cuts away the image and pushes the title to the side.
The fifth effect is similar to the previous one but here we fix the image to the side and allow the content to flow on the right hand side.
The next demo moves the image up and reveals a grid where the current main image will scale up into the grid. This could be a great idea for showing related posts right in the header.
The last effect is an attempt to imitate the cool effect seen on Jam3: the fullscreen image becomes a top bar and the content slides in.
We really hope you enjoyed these effects and get inspired!
Simplesmente perfeito. Todos os seus trabalhos são geniais, você não é apenas uma web designer mas também uma artista.
Very hot!! *thumbs up*
This is super cool..!
very nice once again!!!!!! this time there is no github repo or haven’t you found the time yet?
Absolutely awesome!
Thanks for sharing 🙂
Beautiful effects, but bad interaction. Don’t jack my scroll.
so amazing!!!! I want to learn more 🙂
I took the liberty of creating a repo at https://github.com/rejas/ArticleIntroEffects for now if anyone is interested
Got a lot of inspiration from these. I’ve created some intro effects – but with all animations using Velocity.JS (just as fast, and sometimes faster than CSS animations). It uses a single simple HTML and CSS structure – it runs animations while scrolling on desktop, or on swipe on mobile.
See them here: http://www.anthonypalicea.com/velocityarticleintros/
Github here: https://github.com/anthonypalicea/velocity-articleintros
Thanks again for the inspiration!
This thing is amazing and I’m using it for my single posts in WordPress. I have a problem with nicescroll. When I scroll down, it flashes several times before scrolling down. I tried to install the jquery.nicescroll.min.js manually and I tried with all the plugins I could find in the WordPress repository with no success.
There is probably an easy fix for that but I thought about asking just in case someone knew the answer before I spend another couple of days on it. The “push” effect is amazing but it doesn’t match with that “old” scrollbar on the side. I know I can easily modify the scrollbar but I want the smooth effect of nicescroll.
Thank you very much again.
The combination of this script and nicescroll is most likely the cause of your flashing. I wouldn’t recommend using both scripts, as both manipulate the document scrolling. You can still get smooth effects using the CSS transitions.
Sidenote: I personally think nicescroll manipulates the scrolling sensitivity too much.
You are happy guys, you are flying in the world without Internet Explorer.
You really killed the mood – you’re right but killed the mood 😀
One question: what should i do in order to make some pages with “no effect” (no background image, starting directly from step 2) ??
You are great! Thanks 🙂
Thanks youuuuuu
Hi, great article!
I had found a bug in the fifth effect on FF (i’m running 30.0).
The text of the article remain hidden. I added a new class to the div, setting his z-index to 1000 as like the .title and it works.
Have a nice day
Congrats. For the first time I’ve said ‘oh.. I love the web’ , thats was an amazing feeling, thanks !
Hi,
Thanks for this amazing article. I would like to put this into my wordpress index.php.
Do you know how to do that? Because i’ve try but without success.
Best regards.
Devince.
hmm, not as simple to apply this article to index.php at wordpress, i think , first you must learn how to make wordpress theme or child theme
I showed my director and other bosses this effect and now they want me to use it for a big client. I feel like I made a huge mistake because its jagged in safari and IE8 doesnt work at all. Any suggestions to what my next move would be? I can go ahead and assume there is no fix for IE and ill have to create a different page for IE8 and below to visit.
Hey Manoela,
just saw the pic of my beloved Lab, called “Woody”, in the second demo. “Unconditional Love & Cookies” is such a perfect headline … I love it! Keep on rockin’ with your CSS-Inspiration. Woody likes it too (while snoring under his yucca-palm in the living room) … ;o)
Caught a weird issue in Firefox caused by the disable/enable scroll effect in the js that disabled the space key in forms. Change
var keys = [32, 37, 38, 39, 40], wheelIter = 0;to
var keys = [37, 38, 39, 40], wheelIter = 0;Hope that helps someone else!
You are a genius. Your solution works perfect for me. My problem was with an Olark chat form. Olark knows that the problem is a line of code. But thye don’t know what line is about. Your solution saved my day. Thank you very much
I have an issue with one page scroll nav. it’s not working from the very top of the article image. 🙁 any help pls!
It’s seems to be a bug in chrome??, when I scroll down at the effect “push”, the bottom of the page bug, I got a grey space… like this
http://cdn.imghack.se/images/7a21caf8e12bfa4e1e6abe88aa19a9dd.png
Please help!
@Mike Hobizal Did you manage to convert this great intro effect into a working WordPress theme? One thing is editing CSS, classes/ID’s but the app.js + data JSON source files requires some work as well to make it work.
Would love to see/buy WP theme utilising this effect.
Thank buddy.
Hello Ms. Lou,
Thank you for your effort and inspiration. Wonderful effects.
-Henry
To Anyone:
Please help. I have been playing around with the “Sliced” Demo (index3.html) and it does not seem to work properly with an image size of 1920×1080 on my 1600×900 laptop display. It does not fit/scale to display the whole image.
When I tried changing .bg-img img { min-width: 100%} TO {width: 100%} it initial works, but resizing the browser window is problematic. The split does not work properly. I have spent 2 days trying to get it to work with no luck.
Has anyone else tried a larger image than the 1200×800 example? Any help would be deeply appreciated and may help others that are running into the same issue.
Please disregard my call for help.
How I want it to work (wishful thinking) and how it is designed to work are fundamentally different. It is not a large image issue at all. It is my challenge and not any fault of the design. Sorry for the noise.
Thank you again Manoela Ilic for your beautiful designs and inspiration.
p{text-align:justify;}
nice .
Arrrg…
I’ve missed THAT… Wonderful effects!
Thanks a lot for sharing these inspirations!
Étien’
Can anyone help with adding the smooth scroll to anchors inside the article? I assume it has something to do with the animation listener? Just cannot figure out a script to continue allowing the animation of smooth scrolling once inside. The effect I’m trying to implement this in is the side-fixed. Thanks!
Freaking awesome. Will use this on my next project very classy, Thanks guys
Oh this is just beautiful!!!!
Hi,
awesome work. Only one thing that is bugging me is that i can’t use swipe on ipad, you actually have to tap on the tiny icon at the bottom of the screen. Took me few tries to notice it and i am worried that using this on a live site would confuse the visitors too much.
Adding this feature would make it more user friendly, I think.
Might have a go at that to be able to implement it or did anyone add these already?
Bottom line – the effects are really awesome.
Camilla
Hi Mary Lou, I really like all of your work, it is truly awesome 🙂 I have a question. I noticed that in demo 2 you added a css gradient over an html image, which is what i’m trying to do for my site, but i’m not sure how to go about it and i don’t quite follow what you did here. So if I wanted to simply add a css gradient over an html image on a page, how should i do that?
Hi Mary Lou, thank you so much for all your contributions. That’s amazing!!
I just have a question. In demo 1 do you have an advice for how to make responsive the background image ?
Thanks a lot again!
Awesome job! I love you!
Hi,
Writing to ask if anyone managed to fix the broken effect of Demo-2 (Fade-out) on Internet Explorer. I’ve built an entire website for a client based on that effect and only just today noticed it’s broken on -guess what- IE.
Reading through the comments, I’ve noticed a Velocity JS repo, but the effect displayed there is far from what I have now.
Thanks guys, and sorry for the inconvenience.
Same problem here, I’ve found that all hell break loose at IE 8 and earlier, hope this helps, In the meantime I’ll also be working on a solution.
This is the error “Object doesn’t support this property or method”,
it starts to fail at this line window.addEventListener( ‘scroll’, scrollPage );
I’ve managed to fix the Fade-out effect in IE 10. Just add this extra rule somewhere after all your other css.
.bg-img img
{
position: relative;
}
The position if “fixed” by default.
Make sure it’s taken into account, just add “!important” otherwise.
Hey!
how can I add a video instead of image in the background of first page of ‘PUSH’ effect of this template?
hi… awesome work ..
the 5th effect , fixed side does not work in mozilla. The main content does not appear. Has any one else faced the same problem . ?? Has anyone found a solution for it ? plz can anyone help me ??
Thank you very much Boss…….
Hi,
I tried to recreate the functionality and on Codepen it worked like a charm, but every time I try to implement it on my website, I keep getting “Uncaught TypeError: Cannot read property ‘querySelector’ of null”. I believe I tried all the solutions that came to my mind – disabling jQuery, changing the order of loading scripts, adding the actual button (even though it works all fine without the button in my pen)… It just keeps returning the error in line trigger = container.querySelector( ‘button.trigger’ ); no matter what I do. Anyone has any other ideas?
Obviously, other than this being completely my fault, I assume, I’d just like the say that I absolutely adore the effects – as much as plenty of other things on codrops.
Thanks a lot for all the stuff you post here 🙂
Thank you for that all. Boss.
Hi,you are doing realy good, awesome!!!, thank you for sharing.
Love these effects; anyone know how well they work for users who may require accessibility adaptions? I’m a great believer in brand and accessibility working together so any info on how well these work on different browsers would be great. I’ll be testing some of these with a view to accessibility and can feedback if useful.
Bug in Fixed Side page with Firefox 35.0.1 and 37.0a2.
Problem:
When I scroll down I see Title not the content text i.e.:
.content > div:not(.title) p.Solution:
component.css:24
.bg-img { ... /* note : -moz-backface-visibility: exists, but do nothing on bug */ -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: -1; /* ++ : work on firefox and don't bug others */ }@Fabrice, Thank you for this FIX for the FireFox!
Thank you Fabrice for the fix. that same fix works on I.E. as well.
Asn thank you MAry Lou for all your amazing work.
When boostrap is css is added, the “Push” effect container is offset to right. By adding “left:0” on .intro-effect-push .header the problem is solved. You might want to update.
These effects are really beautiful !
I’d like to implement the forth effect into joomla 3 articles …
Googled and tried it for a while – but without success …
What I did:
– copied the package into the website’s root within the mamp-pro folder.
– changed all the path-lines concerning .css and .js from the demo4.html file.
– copied the source-code from demo4.html into a) an article b) an custom html module using ck-editor.
Could you please give me a hint or a knowledge-source how to do that?
Really appreciate any tip very much!
Thanks in advance,
Martin
Hi, i’m using push effect. Anyone know how to remove the effect in mobile ?
Does anyone know how to make it scroll down a specific amount of pixels? Right now it is only going down 250px when you first scroll down. Is there a way to change this to say 500px?
Having problem in responsive [Demo 3]
.intro-effect-sliced .bg-img:last-child not showing in responsive.
Thanks for the nice effects…
I was Wondering how can i change the title H1 position to relative instead of absolute without changing the position…
the absolute positioning for long titles does not work and some areas of title will not be shown.
Beautiful work just wondering did anyone come up with a fix for the glitch with safari?
that happens to me as well, i hope it gets fixed
Hello everyone! How can I see all your guys responses? I see some of you have 2, 8- 24 responses on your questions, but I can’t see them.