Creating a pop up that moves to the side after a few seconds

[darkwriterxx94]

I’m a novice in web design but I can usually achieve what I want using css, html and plugins in WordPress. I want to create a dialogue box that popups when the homepage loads and then hides off to the side after a few seconds. I then want the box to popout again if the user clicks on it. For a visualization, this site does it exactly. https://pupunzi.com
Is this possible with just css and html or would I have to learn to use javascripts?

If it’s possible, could someone point me in the right direction on where to start?

Any help would be appreciated.

[Beverleyh]

Is this possible with just css and html

Yes

If you’re asking how the linked site does it, you can check via the developer toolbar – that’s F12 in most browsers. Use it to inspect their pop up element and see what styles and CSS animations are applied via the stylesheets pane.

If you’re asking how to do it yourself from scratch, start researching “keyframe animations in css”. You’ll most likely be using variations of the transform property, so if you aren’t already familiar with it, have a look into that too.

You could also look into existing animation libraries for code inspiration (although you’ll likely find tutorials while you research more about keyframes) “animate.css” is a good one.

If you want specific help though, try mocking up a simple demo in CodePen showing your own code. Also clearly explain what is and isn’t working as expected. From there we’ll be better placed to offer suggestions and fixes.

[WayneKenney]

Here’s a solution: If the popup is a div layered on top then you can use Animate.CSS with a JQuery delay.

Animate.CSS : https://daneden.github.io/animate.css/

Can do it like this: https://codepen.io/anon/pen/JerdbQ

Edit: Woops. Didn’t read the whole question. You may need to use a JQuery hover event to bring it back.

[Beverleyh]

I too missed the part about having it appear again when the user clicks on a trigger. That would most likely require the use of Javascript, although you can emulate a CSS-only click-trigger to a degree using the “checkbox hack” (Google that for more info).

Here’s a lightweight pop up example using no libraries in case it helps. The demo uses images but it can easily be adapted for text http://fofwebdesign.co.uk/template/_testing/modal-popup-effects.htm

[darkwriterxx94]

Ok great. Thanks for all of your responses and I’ll check back in if I’m successful. I’ll probably try to achieve the original animation and hover pop out before moving on to trying to bring it back when the user clicks on it.

[Beverleyh]

For fun, I converted my previous image modal popup to a text version http://fofwebdesign.co.uk/template/_testing/modal-popup-effects-text.htm

Good luck with your project.

[darkwriterxx94]

So I’m back and I’ve had some success thanks to the links you posted. I surprised myself with how much I was able to deconstruct the code of those examples. I was finally able to get the picture to zoom in and I was also able to get it to slide to the left and after some work I managed to make them execute one after the other. It works fine in fiddle but when I try to paste it into my wordpress template it doesn’t work.

I’ve posted a fiddle (please excuse any formatting issues. I’m learning the rules as I go along and study more code) in case I missed something that might possibly be conflicting with the animation. https://jsfiddle.net/darkwriterxx94/xjs8m4p2/

[darkwriterxx94]

Sorry, but I figured it out. I had to replace the $ with jQuery and it worked. Thanks for all your help.

[darkwriterxx94]

Sorry to reopen this thread if it’s been closed. I’ve managed to do the popup and get it to work in wordpress. However, is it possible to delay the animations so that the hover happens after the zoom has completed? While the zoom is happening, if I hover over the popup it does the second animation (slide out left). I’d post the code into fiddle, however, this confict doesn’t happen there. Only in my website.

[Author]

Posts