I would like to add a simple scrolling parallax effect to a text on a white background in Wordpress Elementor by adding some custom css. The goal is that text moves slower when scrolling. Overall it would be nice to achieve that inside Elementor editor I could add this effect on any element (text, image) by using CSS only.
Example: On http://www.thinkceu.com/ the numbers: 01, 02, 03
I have tried:
Elementor tutorials: all said it is available in Elementor pro, which is not an option for me.
https://www.youtube.com/watch?v=rLrLJQBG_qo I have tried to add some parts from this video without any result
https://freefrontend.com/css-scroll-effects/ I have tried to add some of them with no success
I have also searched here on stackoverflow the existing questions, but they were all different, for example: Wordpress - Parallax effect however the step by step guide is not available anymore
FYI: I have no coding knowledge, I have only used WordPress, but it would be a great opportunity to start learning some css. :) Thanks in advance for all your help!
Related
i'm trying to find a theme or plugin in order to create a site like this one https://www.apple.com/ipad-air/
On every scroll you see elements moving as well as when you reach on ipad the element remains sticky and the scroll is inside the ipad's screen.
Any suggestion on how to do this?
Thanks in advance
for animation scrolling effect you can check https://scrollmagic.io/ , if you want ready made plugin for Wordpress then you can download https://codecanyon.net/item/scroll-magic-wordpress-scrolling-animation-builder-plugin/19418234?irgwc=1&clickid=zv-y723lpxyORtVwUx0Mo3Q1UkESDE3NOVT1XE0&iradid=275988&irpid=1266748&iradtype=ONLINE_TRACKING_LINK&irmptype=mediapartner&mp_value1=&utm_campaign=af_impact_radius_1266748&utm_medium=affiliate&utm_source=impact_radius this WP plugin
Using Divi in Wordpress.
I have 2 (among many) blog posts, one built without the Divi Builder(earlier on), the other built with Divi Builder.
This one was built without the Divi Builder and works nicely. I set float:left on article div.et_post_meta_wrapper and it looks as I want, with the Text wrapping around the image.
Working Post
This one, with the exact same CSS but was built with the Divi Builder, when I turn on float:left, it makes the entire Div disappear.
Broken Post
Can someone find the problem for me?
I’m designing a wordpress website however I have no experience with html and CSS so when I need to fix bits and bobs of my website, I copy and paste CSS code that I manage to find online and it has been working so far.
The problem I have at the moment is I’m using a forum plugin called wpforo and I would like to edit how the reply / create new topic box looks. It looks very cluttered and unattractive (https://prnt.sc/paccv8).
What CSS could I add such that I could hide a few buttons? Here are some screenshots of how the answer box is laid out on my website. (divs and classes)
https://prnt.sc/pacddi
https://prnt.sc/pacdki
https://prnt.sc/pacea4
https://prnt.sc/paceha
https://prnt.sc/pacf09
Hiding some buttons would be the quick fix, if possible – what CSS could I add such that I could reveal the hidden buttons with an ‘advanced’ button then unreveal it with a ‘basic button’, here are two screenshots to demonstrate what I mean.
https://prnt.sc/pac5fm
https://prnt.sc/pac5py
Thank you.
I think the default you have is fine to be honest. If you want some space between elements, then you can use margin-top, margin-bottom, margin-left, margin-right for an element. For example #div-name{margin-bottom: 1rem}. Also, if you want the same amount everywhere then insetad of specifying all top,bottom,left, right, you can just use margin: 1rem which will do it for all.
If you want the background colour to change like in one the examples then background-color: blue on the title div would work.
As for the basic and advance button options, you wont be able to do this with CSS. It would require Javascript/jQuery. There will be many tutorials online for how to hide/show elements using jquery, but I think (I haven't used Wordpress enough to know if this is true) you will need to create some javascript file and then attach it to the page somehow. It's a lot of new stuff for a beginner to learn. I would just stick with what you have.
I would also suggest W3Schools as a quick way to learn some basic CSS, which might give you enough to get what you want.
Remember, CSS is for styling, Javascript is for functionality.
I'm trying to get Tumblr's photosets to appear 640px wide.
I'm modifying CATCHING ELEPHANT for my blog http://assemblyradio.tumblr.com/
I'm making the whole posts section of the theme wider.However, I can't seem to get photo sets to appear 640px wide.
I would like the sets to show up as Tumblr intended with their fancy layout, because they look great. Therefore this solution is not what I'm looking for:
Change default photoset size on tumblr
I have tried java script from here:
Tumblr theme dev: Square-75px photos for Photoset posts
and here:
Change default photoset size on tumblr
The second script sort of worked but the images are cropped off =(
If I add some custom CSS I can get the iframe to be 640px wide, but then the height does not adjust accordingly!
Everytime I think I figure it out on Chrome's web developer tool, I can't seem to get the code right in Tumblr's custome CSS. I thought using this selector gadget [How can I get the CSS Selector in Chrome?
could help me target exactly what CSS I should be editing (to see if that could help) but it can't tell me the path to the element, maybe because it's an iframe.
Does anyone know how to to get custom photoset width?
Or how to get an iframe height to adjust automatically?
Or how to find a complicated path to a class?
Any help would be much appreciated. I just want to see my cute kittens.
Thank you!
Tumblr's limitations had also been annoying me, so I wrote a jQuery plugin for a fully responsive Photoset layout that uses Tumblr's style. It also includes extra information (that can be toggled on/off) for EXIF and caption data on each photo.
https://github.com/PixelUnion/Extended-Tumblr-Photoset
I have a client that is looking for a Wordpress plugin or theme that will display an image over a rotating slider, similar to the home page here: https://www.threebakers.com/
Any thoughts on an out-of-the box solution, or do I need to build this one by hand?
Ironically, I did this exact thing on this site here:
http://www.gilbertmeatlocker.com
Its using the popular Flex Slider, but its not Wordpress. I was working with Drupal on that particular site, so its a custom implement of the stand-alone javascript Flex Slider.
I had to fiddle around with z-index and I used negative-margins to move elements into position.
That particular implementation on gilbertmeatlocker.com is extra complex because the silver frame around the edge is also overlapping the Flex Slider. I would recommend not doing a frame like this if possible, though. It added some serious bugs that were difficult to make work on all browsers.
Putting a single image over the slider like your bakery example or the gilbertmeatlocker.com logo shouldn't be a problem though.
If noone else recommends something better, you could try Flex Slider. There is a Wordpress version of it.