Social Media Icons

on

 Social Media Icons

Creating interactive and visually appealing social media icons for your website can significantly enhance user engagement. This project demonstrates a unique way to style and animate social media icons using HTML, CSS, and JavaScript. With a clean design and hover effects, users experience an elegant UI while interacting with these icons. Additionally, the implementation of the VanillaTilt library adds a dynamic 3D effect to make the icons even more captivating.



This code creates a stylish list of social media icons using HTML. Each list item represents a platform, styled with custom colors using CSS variables and Font Awesome icons. The ul element with the class sci ensures a clean and flexible layout for the icons.

HTML CODE

   <ul class="sci">
        <li style="--clr:#ff0000;"><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
        <li style="--clr:#171515;"><a href="#"><i class="fa-brands fa-github"></i></a></li>
        <li style="--clr:#1877F2;"><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
    </ul>

CSS code styles a social media icon section with the following properties:

.sci Class:

  • Positions the social media icons relatively.
  • Displays the icons in a flexible row layout with a 40px gap between them.

.sci li Class:

  • Removes default list styles to create a clean layout.

.sci li a Class:

  • Defines a square container for each icon with a width and height of 150px.
  • Aligns the icons centrally using flexbox.
  • Adds a white background, gray color for text, and a large font size (4em).
  • Ensures rounded corners with border-radius: 10px.
  • Enables smooth 3D transformations with transform-style: preserve-3d.
  • Includes subtle hover animations using transition for background and transform properties.
  • Applies a box-shadow for a modern, elevated effect.

CSS CODE

sci {
    position: relative;
    display: flex;
    gap: 40px;
}

.sci li {
    list-style: none;
}

.sci li a {
    position: relative;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #333;
    font-size: 4em;
    text-decoration: none;
    border-radius: 10px;
    transform-style: preserve-3d;
    transition: background 0.25s, transform 0.25s;
    box-shadow: 0 25px 35px rgba(0, 0, 0, 0.1);
}

adds hover effects and icon animations for the social media links:

.sci li a:hover:

  • Changes the background color and border to the value of --clr on hover.
  • Enhances the shadow effect for a more pronounced look.

.sci li a i:

  • Sets a smooth transition for scaling and color changes on hover.
  • Disables pointer events to prevent interaction with the icon directly.

.sci li a:hover i:

  • Enlarges and lifts the icon with scale and translateZ for a 3D effect.
  • Changes the icon color to white for better contrast.

CSS CODE

.sci li a:hover {
    background: var(--clr);
    box-shadow: 0 25px 35px rgba(0, 0, 0, 0.25);
    border: 5px solid var(--clr);
}

.sci li a i {
    transition: transform 0.5s, color 0.5s;
    pointer-events: none;
}

.sci li a:hover i {
    transform: scale(1.5) translateZ(50px);
    color: #fff;
}

JavaScript code applies a 3D tilt effect to the social media icons using the VanillaTilt library:

VanillaTilt Initialization:

  • Targets all <a> elements within the .sci li list.

max Property:

  • Sets the maximum tilt angle to 30 degrees for a dynamic effect.

speed Property:

  • Configures the animation speed for smooth interactions.

glare and max-glare Properties:

  • Enables a reflective glare effect with up to 50% intensity, adding a realistic 3D look.

JavaScript code

    // VanillaTilt uygulanması
    VanillaTilt.init(document.querySelectorAll(".sci li a"), {
        max: 30,
        speed: 400,
        glare: true,
        "max-glare": 0.5
    });

dynamically changes the background color of the webpage based on the hovered social media icon:

Element Selection:

  • All <li> elements within the .sci list are selected and stored in list.
  • The <body> tag is stored in bg.

Mouseover Event:

  • Adds a hover event listener to each <li>.
  • Retrieves the custom CSS variable --clr defined for each icon.
  • Sets the background color of the body to the retrieved value.

Mouseleave Event:

  • Adds another listener to reset the background color to white (#fff) when the mouse leaves the icon.

JavaScript code

    // Arka plan rengini değiştirme
    let list = document.querySelectorAll(".sci li");
    let bg = document.querySelector("body");

    list.forEach((element) => {
        element.addEventListener("mouseover", function(event) {
            let color = element.style.getPropertyValue("--clr");
            bg.style.backgroundColor = color;
        });
        element.addEventListener("mouseleave", function() {
            bg.style.backgroundColor = '#fff';
        });
    });

Conclusion

this project demonstrates a visually engaging and interactive design for social media icons using HTML, CSS, and JavaScript. The dynamic background color effect and smooth hover animations enhance the user experience, making the interface both modern and appealing. This implementation showcases how small details and responsive interactions can significantly elevate a web design, adding a creative and professional touch to any project.

Comments

Post a Comment