Media Elements
Animated or Unique Media Elements
Below is a collection of different unique and modern ways to display media elements on your web pages, like videos or images. A lot of sites will just display images or videos as they are, simply aligned with the text content on a page, but here we have some more eye catching designs that incorporate media in a creative way.
Infinite Image Scrolling
This animated image section is built using custom HTML within an HTML block, and custom CSS is the WP theme customizer. The look was inspired by one of the several cool elements found on OCL Group’s website.
The code for this was not actually written using the OCL Group’s website, but instead was built using a Stack Overflow thread that seemed similar, titled “Infinite horizontal scrolling image loop“.
Consectetur adipiscing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin ante fermentum tincidunt fringilla. Aliquam quis erat vel magna sagittis tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nec laoreet mauris. In elementum egestas nulla in elementum.
Contact
This is a Test!
This is a small chunk of placeholder content to assist in my testing. It needs to be much longer to give a better idea of how this section would look with realistic content.
This is a Test Button![Masked image](https://toolbox.splashmg.ca/wp-content/uploads/2024/10/brado-mask-bg-const.webp)
![Masked image](https://toolbox.splashmg.ca/wp-content/uploads/2024/10/splash-mask-bg-computers.webp)
![Masked image](https://toolbox.splashmg.ca/wp-content/uploads/2024/10/kraken-mask-bg-paint.webp)
Sticky GAllery
This section was accomplished using the built in Sticky Settings
This is a Kadence Row, with two columns. This left column, if you go into “Advanced Settings” & then into “Sticky Settings”, you can turn this feature on which will automatically make this one column remain on the screen as long as the right column is still scrolling with content.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis quam eu libero posuere fringilla. Quisque dui ante, vehicula eget odio nec, vestibulum finibus enim. Vestibulum sit amet nulla ornare, rutrum augue sed, ultricies elit. Cras sit amet purus ligula. Vestibulum pretium quam id felis suscipit dictum. Aenean mauris nibh, mattis eu vestibulum at, hendrerit nec mauris. Nam sit amet lorem magna.