Animated Image and Text Section

Animated Image and Text Section

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All Shopify themes.

Create an overlapping animated image text section in your website. 

Was it possible to create an animation without applying it to all the sections in your website? Yes, most web developers will add an aos external library to do the work. Lets do this without a library though. Let our simple code do the work. 

 Check DEMO store here 💻. Password: made4uo

To start.

1. We have to add a section, so lets go to our code editor. In your shopify admin store, open themes, then click "Actions", then "Edit code".

2. Open the Sections folder, and add a new file. Lets name it "animated-image-text". Then paste the code below. 

 <animated-images>
<div class="animatedContainer" id="animated--{{section.id}}" style="background: {{section.settings.section_bg}}; flex-direction: {{section.settings.placement}} ">
<div class="imagesContainer">
{% assign firstImage = section.settings.img_1 %}
{% assign secondImage = section.settings.img_2 %}
{% if section.settings.slide_image %}
<a {% if section.settings.img_1_link != blank %}href="{{section.settings.img_1_link }}" {% endif %}
class="slideLink {% if section.settings.placement == 'row-reverse' %} slide--left {% else %} slide--right {% endif %}"
style="width: 100%">
<img class="slideImage "
style="width: 100%" alt="{{section.settings.img_1.alt }}"
srcset="{% if firstImage.width >= 493 %}{{ firstImage| img_url: '493x' }} 493w,{% endif %}
{% if firstImage.width >= 600 %}{{ firstImage | img_url: '600x' }} 600w,{% endif %}
{% if firstImage.width >= 713 %}{{ firstImage| img_url: '713x' }} 713w,{% endif %}
{% if firstImage.width >= 823 %}{{ firstImage| img_url: '823x' }} 823w,{% endif %}
{% if firstImage.width >= 990 %}{{ firstImage| img_url: '990x' }} 990w,{% endif %}
{% if firstImage.width >= 1100 %}{{ firstImage | img_url: '1100x' }} 1100w,{% endif %}
{% if firstImage.width >= 1206 %}{{ firstImage | img_url: '1206x' }} 1206w,{% endif %}
{% if firstImage.width >= 1346 %}{{ firstImage| img_url: '1346x' }} 1346w,{% endif %}
{% if firstImage.width >= 1426 %}{{ firstImage| img_url: '1426x' }} 1426w,{% endif %}
{% if firstImage.width >= 1646 %}{{ firstImage | img_url: '1646x' }} 1646w,{% endif %}
{% if firstImage.width >= 1946 %}{{ firstImage| img_url: '1946x' }} 1946w,{% endif %}
{{ firstImage | img_url: 'master' }} {{ firstImage }}w"
src="{{ firstImage | img_url: '1946x' }}"
loading="lazy"
width="973">
</a>
{% else %}
{% if section.settings.img_1 != blank %}
<a {% if section.settings.img_1_link != blank %}href="{{section.settings.img_1_link }}" {% endif %}class="firstLink" >
<img class="firstImage" alt="{{section.settings.img_1.alt }}"
srcset="{% if firstImage.width >= 493 %}{{ firstImage| img_url: '493x' }} 493w,{% endif %}
{% if firstImage.width >= 600 %}{{ firstImage | img_url: '600x' }} 600w,{% endif %}
{% if firstImage.width >= 713 %}{{ firstImage| img_url: '713x' }} 713w,{% endif %}
{% if firstImage.width >= 823 %}{{ firstImage| img_url: '823x' }} 823w,{% endif %}
{% if firstImage.width >= 990 %}{{ firstImage| img_url: '990x' }} 990w,{% endif %}
{% if firstImage.width >= 1100 %}{{ firstImage | img_url: '1100x' }} 1100w,{% endif %}
{% if firstImage.width >= 1206 %}{{ firstImage | img_url: '1206x' }} 1206w,{% endif %}
{% if firstImage.width >= 1346 %}{{ firstImage| img_url: '1346x' }} 1346w,{% endif %}
{% if firstImage.width >= 1426 %}{{ firstImage| img_url: '1426x' }} 1426w,{% endif %}
{% if firstImage.width >= 1646 %}{{ firstImage | img_url: '1646x' }} 1646w,{% endif %}
{% if firstImage.width >= 1946 %}{{ firstImage| img_url: '1946x' }} 1946w,{% endif %}
{{ firstImage | img_url: 'master' }} {{ firstImage }}w"
src="{{ firstImage | img_url: '1946x' }}"
loading="lazy"
width="973">
</a>
{% endif %}
{% if section.settings.img_2 != blank %}
<a {% if section.settings.img_2_link != blank %}href="{{section.settings.img_2_link }}" {% endif %}class="secondLink" >
<img class="secondImage" alt="{{section.settings.img_2.alt }}"
srcset="{% if firstImage.width >= 493 %}{{ firstImage| img_url: '493x' }} 493w,{% endif %}
{% if secondImage.width >= 600 %}{{ secondImage | img_url: '600x' }} 600w,{% endif %}
{% if secondImage.width >= 713 %}{{ secondImage| img_url: '713x' }} 713w,{% endif %}
{% if secondImage.width >= 823 %}{{ secondImage | img_url: '823x' }} 823w,{% endif %}
{% if secondImage.width >= 990 %}{{ secondImage| img_url: '990x' }} 990w,{% endif %}
{% if secondImage.width >= 1100 %}{{ secondImage | img_url: '1100x' }} 1100w,{% endif %}
{% if secondImage.width >= 1206 %}{{ secondImage | img_url: '1206x' }} 1206w,{% endif %}
{% if secondImage.width >= 1346 %}{{ secondImage| img_url: '1346x' }} 1346w,{% endif %}
{% if secondImage.width >= 1426 %}{{ secondImage| img_url: '1426x' }} 1426w,{% endif %}
{% if secondImage.width >= 1646 %}{{ secondImage | img_url: '1646x' }} 1646w,{% endif %}
{% if secondImage.width >= 1946 %}{{ secondImage| img_url: '1946x' }} 1946w,{% endif %}
{{ secondImage | img_url: 'master' }} {{ secondImage }}w"
src="{{ secondImage | img_url: '1946x' }}"
loading="lazy"
width="973">
</a>

{% endif %}
{% endif %}
</div>
<div class="textContainer" style="color: {{section.settings.section_text}};">
{% if section.settings.title != blank %} <h1 style="color: {{section.settings.section_text}};"> {{ section.settings.title }}</h1>{% endif %}
{{ section.settings.description }}
{% if section.settings.button_link and section.settings.button != blank %}
<a href="{{ section.settings.button_link }}" class="{{section.settings.button_style}}"> {{ section.settings.button}}</a>
{% endif %}
</div>
</div>
</animated-images>
<style>
.animatedContainer {
width: 100%;
padding: 5% 10%;
display: flex;
gap: 40px;
position: relative;
justify-content: space-between;
align-items: center;
background: {{section.settings.section_bg}};
}
.imagesContainer {
display: flex;
align-items: center;
flex: 0 1 50%;
margin-left: -15px;
margin-bottom: 5rem
}
.imagesContainer > a > img {
width: 100%;
}
.imagesContainer .slideLink {
z-index: 1;
}
.imagesContainer .firstLink {
z-index: 1;
flex: 0 1 50%;
transform: translate(50px, 50px);
}
.imagesContainer .secondLink {
flex: 0 1 50%;
z-index: 1;
}
.textContainer {
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
min-width: 43%;
flex: 0 1 43%;
align-items: center;
}
.textContainer h1 {
font-style: normal;
font-weight: 700;
margin: 0;
}
.textContainer p {
text-align: center;
}
.textContainer a {
text-decoration: none;
padding: 10px 20px;
border: 2px solid {{section.settings.section_text}};
display: inline-block;
width: max-content;
border-radius: 0rem;
}
.button--primary {
color: white;
background: {{section.settings.section_text}};
}
.button--secondary {
color: {{section.settings.section_text}};
}
.slide--left {
flex-direction: row-reverse;
}
.slide--right {
flex-direction: row;
}
.section-animation .slide--left {
transition: margin-left 1s cubic-bezier(.215,.61,.355,1);
animation: slideFromLeft 1s cubic-bezier(.215,.61,.355,1);
}
.section-animation .slide--right {
transition: margin-left 1s cubic-bezier(.215,.61,.355,1);
animation: slideFromRight 1s cubic-bezier(.215,.61,.355,1);
}
.section-animation .firstLink{
transition: opacity .5s ease, width 1s ease, transform .5s cubic-bezier(.2, .06, .05, .95);
animation: fade-in .6s ease, first-image .6s cubic-bezier(.2, .06, .05, .95);
}
.section-animation .secondLink {
transition: opacity .5s ease, width 1s ease, transform .5s cubic-bezier(.2, .06, .05, .95);
animation: fade-in .6s ease , second-image .6s cubic-bezier(.2, .06, .05, .95);
}
.section-animation .textContainer {
transition: opacity .9s cubic-bezier(.04, 0, .2, 1),transform .9s cubic-bezier(.04, 0, .2, 1);
animation: move-up .8s ease;
}

@keyframes slideFromLeft {
0% {
opacity: 0;
margin-left: 5%;
}
100%{
opacity: 1;
margin-left: 0;
}
}
@keyframes slideFromRight{
0% {
opacity: 0;
margin-left: -5%;
}
100%{
opacity: 1;
margin-left: 0;
}
}
@keyframes first-image {
0% {
transform: translate(-50px, 50px);
}
100%{
transform: translate(50px, 50px);
}
}
@keyframes second-image {
0% {
transform: translateX(50px);
}
100%{
transform: translate(0);
}
}
@keyframes fade-in {
0% {
opacity: 0;
width: 110%;
}
100%{ opacity: 1;
width: 100%;
}
}
@keyframes move-up {
0% {
opacity: 0;
transform: translateY(100px);
}
100%{
opacity: 1;
transform: translateY(0px);
}
}
@media only screen and (max-width: 900px) {
.animatedContainer {
flex-direction: column !important;
padding: 5% 8%;
}
.imagesContainer {
width: 100%;
}
.textContainer {
width: 100%;
padding: 0 5%;
}
}
</style>
{% schema %}
{
"name": "Animated section",
"settings": [
{
"type": "select",
"id": "placement",
"default": "row",
"label": "Placement of the items",
"options": [
{
"value": "row-reverse",
"label": "Image to right"
},
{
"value": "row",
"label": "Image to left"
}
]
},

{
"type": "image_picker",
"id": "img_1",
"label": "First image"
},
{
"type": "url",
"id": "img_1_link",
"label": "First image link"
},
{
"type": "image_picker",
"id": "img_2",
"label": "Second image"
},
{
"type": "url",
"id": "img_2_link",
"label": "Second image link"
},
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "richtext",
"id": "description",
"label": "Description"
},
{
"type": "color",
"id": "section_bg",
"default": "#FFFFFF",
"label": "Section background"
},
{
"type": "color",
"id": "section_text",
"default": "#000",
"label": "Section text color"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "text",
"id": "button",
"label": "Button label"
},
{
"type": "select",
"id": "button_style",
"default": "button--primary",
"label": "Button style",
"options": [
{
"value": "button--primary",
"label": "Primary button"
},
{
"value": "button--secondary",
"label": "Secondary button"
}
]
}
],
"presets": [
{
"name": "Animated Section"
}
]
}
{% endschema %}

 

3. Since we are listening to the user's scrolls, lets add a javascript code. There is a way to do it with CSS but not all browsers were supporting it. Anyway, in the Asset folder, open the global.js.

 class AnimatedBox extends HTMLElement {
constructor() {
super();
this.animated = this.querySelector('.animatedContainer');
this.animatedItems = this.querySelectorAll('.animatedContainer');
this.createObserver();
}

createObserver() {
const revealSection = function(entries, observer) {
const [entry] = entries;
if(!entry.isIntersecting || entry.boundingClientRect.top < 0) {
entry.target.classList.remove('section-animation');
} else {
entry.target.classList.add('section-animation');
}
};
let sectionObserver = new IntersectionObserver(
revealSection);

this.animatedItems.forEach(function(section) {
sectionObserver.observe(section);
section.classList.remove('section-animation');
})
}
}

customElements.define('animated-images', AnimatedBox);

 

That's it. 

Note: I would suggest placing it  as a third section or greater, so javascript have time to scroll and call the animation

Copied!
Voltar para o blogue

Deixe um comentário