Develop Reference

Center text over Image (and make responsive)?

In col-2, I am trying to center the "WHAT" text over the image.
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
As we resize the browser, the row height will change so that everything in col-10 fits. I am using object-fit:contain to keep the image proportions correct. I need the "stack-Txt" div to resize with the image so that the text will stay centered over the image
Or maybe you know of a better way to achieve this?
Current Idea:
Put WHAT in another child div, make flex, center text with justify-content/align-items
&
JS addEventListener to window resize, get the img div and set nextSibling size equal to this.
These were the css classes at some point... but the only important thing is that the img doesn't overflow the col-2 or the height (which is variable based on the length of col-10)
.stackParent {
position: relative;
object-fit: contain;
max-width: inherit;
height: 20vh;
}
.stack-Txt {
position: absolute;
text-align: center;
width: 100%;
max-height: 15vh;
min-height: 15vh;
z-index: 4;
}
.stack-Txt-child {
}
.stack-Img {
position: absolute;
object-fit: contain;
max-width: inherit;
min-height: 15vh;
max-height: 15vh;
top: 0%;
left: 0%;
z-index: 3;
}
*Note: I also have media queries to resize text, but this shouldn't make a difference.

If you are using Bootstrap 5 you can just use the built-in classes to achieve so.
Apply .position-relative to the main div parent
Apply .img-fluid to <img /> to make image responsive
Apply .position-absolute, .top-50, .start-50, translate-middle to stack-Txt to center it vertically and horizontally over the image.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent position-relative">
<img class="stack-Img img-fluid" src="https://source.unsplash.com/random">
<div class="stack-Txt position-absolute top-50 start-50 translate-middle">
<div class="fourWsText stack-Txt-child text-white">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
If you don't, just edit your CSS as follow:
.stackParent {
position: relative
}
/* make image responsive */
.stack-Img {
max-width: 100%;
height: auto;
}
.stack-Txt {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="https://source.unsplash.com/random">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>

The text "what" is in center over the image in any screen resolution.
.stackParent{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.stack-Img{
position: absolute;
margin: 0;
min-height: 15vh;
max-height: 15vh;
}
.stack-Txt{
z-index: 99;
}
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>

Slides flicker for 2nd slide with CSS transitions in swiper slider

I have created a centered mode slider(each slide having an image only) with some transition effect when the slide changes, but the slide flickers when it goes from the first to the second slide as well as from the last slide to the first slide.
$(document).ready(function () {
var mySwiper = new Swiper(".swiper-container", {
observer: true,
observeParents: true,
slidesPerView: 3,
loopedSlides: 50,
centeredSlides: true,
loop: true,
watchSlidesVisibility: true,
speed: 1000,
navigation: {
nextEl: ".next-image",
prevEl: ".previous-image"
},
pagination: {
el: ".gallery-pagination",
clickable: true
}
});
mySwiper.init();
});
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
p {
color: #000;
}
.swiper-container {
position: relative;
width: 80%;
}
.swiper-slide {
transition: all 1000ms linear;
transform: scale(0.75);
}
.swiper-slide-active {
transform: scale(1);
}
.image-container {
width: auto;
height: 350px;
border-radius: 9px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9px;
}
.gallery-pagination {
display: flex;
justify-content: center;
margin-top: 15px;
}
.next-image {
position: absolute;
right: 0;
top: 40%;
cursor: pointer;
}
.previous-image {
position: absolute;
left: 0;
top: 40%;
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 1 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 2 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 3 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
<!-- 4 -->
<div class="swiper-slide">
<div class="image-container">
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg">
</div>
</div>
</div>
<div class="navigation-pagination-wrapper">
<!-- Previous Navigation -->
<div class="previous-image">
<p>Prev</p>
</div>
<!-- Pagination -->
<div class="gallery-pagination"></div>
<!-- Next Navigation -->
<div class="next-image">
<p>Next</p>
</div>
</div>
</div>
https://codepen.io/suru235/pen/oNwdRzb
Have been researching possible fixes for this but cannot figure out what's wrong.
Any help will be much appreciated.
Thanks!

Preventing SwiperJS from swiping past the last slide

UPDATED INFO:
I noticed the swiper-wrapper has a width of 4816px and each of the four slides have widths of 1174px:
<div class="swiper-wrapper" style="width: 4816px; transform: translate3d(0px, 0px, 0px);">
<div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 1174px; margin-right: 30px;">
<div class="card-content">
<div class="card-header">
<span>Heading</span>
</div>
I've researched for hours, but am struggling with figuring out how to prevent the swiper from scrolling beyond the last slide. The swiper is set up with four slides that all have a fixed width (not responsive). When the viewport width is less than the width of the swiper container, the SwiperJS is activated. However, it allows the user to swipe far beyond the last (rightmost) slide.
JavaScript
const swiper = new Swiper('.swiper-container', {
observer: true,
observeParents: true,
spaceBetween: 30,
allowSlideNext: false,
freeMode: true,
resistanceRatio: 0,
watchSlidesVisibility: true,
watchSlidesProgress: true,
breakpoints: {
1200: {
allowSlideNext: true,
resistanceRatio: 0,
},
},
});
HTML
The swiper markup is typical:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
Slider 1
</div>
<div class="swiper-slide">
Slider 2
</div>
<div class="swiper-slide">
Slider 3
</div>
<div class="swiper-slide">
Slider 4
</div>
</div>
</div>
CSS
.swiper-container {
max-width: 1220px !important;
}
.swiper-container-product-cards {
margin: 0 auto;
max-width: 1250px;
position: relative;
overflow: hidden;
list-style: none;
padding: 0 5px;
z-index: 1;
}
.swiper-slide {
text-align: center;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0;
border-radius: 0;
height: 578px;
width: 287px !important;
justify-content: space-around;
}

How to temporarily disable "scrollify" when a section is taller the screen height

I am trying to use scrollify for my website. It now has three pages(sections). The second page(section) is taller than the screen height, so that I want to disable “scrollify” until it reaches the bottom of the second page. But on my codes, when the page is scrolled even a little, it goes to the third page before reaching the bottom of the second page. How can I fix this problem? I put part of my code here
HTML
<div class="main">
<section class="section js-section" data-section-name="section1">
<div class="section-content">
<p>XXX</p>
</div>
</section>
<section class="section js-section" data-section-name="section2">
<div class="section-content">
<div class="portfoliocontainer">
<img src="a.JPG" alt="a">
<img src="b.png" alt="b">
<img src="c.jpg" alt="c">
<img src="d.jpg" alt="d">
<img src="e.jpg" alt="e">
<img src="f.jpg" alt="f">
</div>
</div>
</section>
<section class="section js-section" data-section-name="section3">
<div class="section-content">
<h2>section 3</h2>
<p>ZZZ</p>
</div>
</section>
<ul class="pager" id="js-pager"></ul>
</div>
CSS
.main {
position: relative;
}
.section {
width: 100%;
max-height: 105%;
}
.section-content {
max-width: 80%;
margin: 0 auto;
padding: 40px 60px;
text-align: center;
}
.portfoliocontainer {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
flex-direction: row;
max-height: 100vh;
margin-top: 5%;
}
JS
var $section = $('.js-section');
var $pager = $('#js-pager');
var option = {
section : '.js-section',
sectionName:false,
easing: "swing",
scrollSpeed: 600,
scrollbars: true,
overflowscroll: true,
interstitialSection: ".header",
before:function(index) {
pagerCurrent(index);
},
afterRender:function() {
createPager();
}
};
$(document).ready(function(){
$(".downarrow").click(function(){
$.scrollify.next();
});
$(".uparrow").click(function(){
$.scrollify.move();
});
});
$(function() {
$.scrollify(option);
});

you will have to define afterRender and beforeRender function it was giving console an error:
createPager(); pagerCurrent();
were not defined.
https://codepen.io/neel555nc/pen/mzmgeG

scrollreveal.js and flexbox

I'm experiencing an issue with using scrollreveal.js together with flexbox.
I've created a few two-column rows along the page using display flex and when trying to reveal each column separately with the scrollreveal reference only one of them are working.
Any workaround while still being able to maintain the flex attributes?
HTML
<div class="grid">
<div class="column __50 __reveal">one</div>
<div class="column __50 __reveal">two</div>
</div>
CSS
.grid {
display: flex;
}
.column.__50 {
width: 50%;
}
JS
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal');

If I understand you clearly:
Given- the existing code
When- page is scrolled
Then- Columns should scroll into view
I've provided a snippet that shows that it does work based on your code but you have to give enough space for the scrollreveal effect to take place.
TO TEST
Add a div that takes up the space from the initial view.
Add a height to the .column.__50 class so you can see it in action.
Add a border so you can see how they are placed, you can always comment the border out after you no longer need it. Good practice for 'debugging' and visualizing your divs.
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal');
.grid {
display: flex;
}
.column.__50 {
width: 50%;
height: 800px;
border: 2px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.0-beta.25/scrollreveal.js"></script>
<div class="grid">
<div class="column __50 ">
No class="__reveal 1"
</div>
<div class="column __50 ">
No class="__reveal 2"
</div>
</div>
<div class="grid">
<div class="column __50 __reveal">
one
</div>
<div class="column __50 __reveal">
two
</div>
</div>

As I understand, You have to pass a sequence interval (in milliseconds) to the reveal() method, making sequenced animations a breeze.
sr.reveal('.__reveal', 300);
You can read the documentation from this reference link
Stack Snippet
window.sr = ScrollReveal({
distance: '30px',
duration: 1000,
scale: 0
});
sr.reveal('.__reveal', 300);
.grid {
display: flex;
font: 13px Verdana;
flex-wrap: wrap;
}
.column.__50 {
width: 50%;
height: 100px;
background: red;
border: 8px solid #ffffff;
border-radius: 20px;
padding: 20px;
color: #fff;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<div class="grid">
<div class="column __50 __reveal">one</div>
<div class="column __50 __reveal">two</div>
<div class="column __50 __reveal">three</div>
<div class="column __50 __reveal">four</div>
</div>