Scrolling Instagram Story Model for Blogger
Dhanjee Rider
Creating a Scrolling Instagram Story Model for Bloggers using HTML and CSS
Introduction:
In this article, we will explore how to create a visually appealing and user-friendly scrolling Instagram story model using HTML and CSS. This model can be integrated into a blogger's website to showcase images and accompanying captions in a horizontal scrollable format. By implementing this feature, bloggers can engage their audience and provide a dynamic and interactive experience. So, let's dive into the code and understand how to create this scrolling Instagram story model.HTML Structure:
To begin, let's take a look at the HTML structure required for the scrolling Instagram story model:html
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/2.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
Replace your url with #
The above code represents a container div with the class "horizontal-friends-list" that will hold all the stories. Each story is represented by a figure element containing an image and a caption. You can customize the image source and the text for each story by replacing the URL and "text" placeholder respectively.
CSS Styling:
Now, let's move on to the CSS styling required to achieve the scrolling Instagram story model:
<div class="horizontal-friends-list">
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/2.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/3.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/4.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/5.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/6.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/7.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/8.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
<figure>
<picture>
<img src="https://randomuser.me/api/portraits/women/9.jpg" />
<picture>
<a href="#"> <figcaption>text</figcaption></a>
</figure>
</div>
<style>
@use postcss-preset-env {
stage: 0;
}
.horizontal-friends-list {
display: flex; /* Use flexbox for the horizontal layout */
gap: 3px;
overflow-x: auto; /* Add horizontal scrolling capability */
padding-bottom: .7rem; /* Add some bottom padding */
& > figure {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
user-select: none;
margin: 5px;
transition: transform 0.2s ease-in-out;
&:hover {
transform: scale(1.1);
}
&:last-child::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
right: 0;
inline-size: 1rem;
block-size: 100%;
inset-end: 0.2rem;
}
& > picture{
display: inline-block;
inline-size: 80px; /* Adjust the inline size value */
block-size: 80px; /* Adjust the block size value */
border-radius: 50%;
background: radial-gradient(hsl(0 0% 0% / 15%) 60%, transparent 0),
radial-gradient(white 65%, transparent 0),
linear-gradient(to top right, orange, deeppink);
&> a{}
& > img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
clip-path: circle(42%);
}
}
& > figcaption {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: 500;
}
}
}
/* Add media query for mobile responsiveness */
@media (max-width: 600px) {
.horizontal-friends-list {
flex-wrap: nowrap; /* Prevent wrapping of figures */
justify-content: flex-start; /* Align figures to the left */
}
.horizontal-friends-list > figure {
flex-shrink: 0; /* Prevent figures from shrinking */
}
}
figure a{
color: red;
}
</style>
Explanation:
1. The `.horizontal-friends-list` class is used to style the container div. It utilizes flexbox to create a horizontal layout for the stories and enables horizontal scrolling by setting `overflow-x: auto`.2. Each story is styled using the `figure` selector. It is displayed as a flex container with a column layout and centered alignment.
3. On hovering over a story, it is scaled up using the `transform: scale(1.1)` property, providing a visual effect.
4. The last story is given a pseudo-element `::after` to create a visually pleasing end effect.
5. The `picture` element within each figure is styled to define the size and appearance of the image. The image is clipped to a circular shape using `clip-path`.
6. The `figcaption` element represents the caption for each story and is styled with ellipsis for overflowed text.
Mobile Responsiveness:
To ensure a responsive design for mobile devices, we apply a media query with a maximum width of 600px. Within this query, the following adjustments are made:1. The stories are prevented from wrapping using `flex-wrap: nowrap`.
2. The alignment is changed to `justify-content: flex-start` to align the stories to the left.
3. The `flex-shrink: 0` property is applied to prevent the stories from shrinking.
Conclusion:
By following the HTML and CSS code provided in this article, bloggers can easily implement a scrolling Instagram story model on their websites. This model allows them to showcase their content in an engaging and interactive manner, providing an enhanced user experience. Remember to replace the image URLs and caption texts to personalize the stories. Enjoy creating stunning Instagram-like stories for your blog and captivate your audience with this SEO-friendly feature!Last word
In this post we will provided information about Scrolling Instagram Story Model for Blogger , If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
