3D animated TIlt card design

 3D animated TIlt card design



It seems like you're building a blog post and providing various code snippets and tutorial content. Below is the refined and improved version of your HTML example, along with comments added to the code for clarity. This code is specifically for creating 3D animated tilt cards using Tilt.js and CSS.

3D Tilt Card Design Example (HTML, CSS, and JS)

index.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tilt Animation Cards Design</title>
  <!-- Link to the external CSS file for styling -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Container holding the tilt animation cards -->
  <div class="container">
    <!-- Each card will have a 3D tilt effect when hovered -->
    <div class="card" data-tilt>
      <!-- Example image for the card -->
      <img src="https://i0.wp.com/i.pinimg.com/originals/ca/ba/45/caba456db19dca113ca53e115e21570c.jpg?resize=160,120" alt="Image 1">  
    </div>

    <div class="card" data-tilt>
      <!-- Another image for a different card -->
      <img src="https://fuselabcreative.com/wp-content/uploads/2023/07/mobile-apps-design-trends.jpg" alt="Image 2">
    </div>

    <div class="card" data-tilt>
      <!-- Same image as the first card, just repeated for demonstration -->
      <img src="https://i0.wp.com/i.pinimg.com/originals/ca/ba/45/caba456db19dca113ca53e115e21570c.jpg?resize=160,120" alt="Image 3">  
    </div>

    <div class="card" data-tilt>
      <!-- Another image to create variety -->
      <img src="https://fuselabcreative.com/wp-content/uploads/2023/07/mobile-apps-design-trends.jpg" alt="Image 4">
    </div>
  </div>

  <!-- Include jQuery for better browser compatibility -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

  <!-- Include Tilt.js for the tilt effect -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>
 
  <!-- Custom script to activate tilt effect on elements with the 'data-tilt' attribute -->
  <script>
    // Activate tilt effect on all elements with the 'data-tilt' attribute
    $(document).ready(function() {
      $('.card').tilt({
        scale: 1.1, // Set the tilt scale effect (higher value = more tilt)
        maxTilt: 25, // Maximum tilt angle in degrees
        speed: 400, // Speed of the tilt effect
        easing: "cubic-bezier(.03,.98,.52,.99)" // Smooth easing for the effect
      });
    });
  </script>
</body>
</html>


style.css
    /* Reset default margin and padding for all elements */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Make sure the body takes up the full height of the screen */
    body,
    html {
        height: 100%;
        font-family: Arial, sans-serif;
    }

    /* Center the content of the page */
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        gap: 20px;
        /* Space between cards */
        flex-wrap: wrap;
    }

    /* Style for each individual card */
    .card {
        width: 250px;
        height: 200px;
        background-color: #f0f0f0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease-in-out;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Style for images inside cards */
    .card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    /* Optional: Add hover effect (e.g., scaling) for the card */
    .card:hover {
        transform: scale(1.05);
}
    
Explanation and Comments:

  1. HTML Structure:

    • The HTML contains a .container div that holds multiple .card divs. Each card is decorated with a data-tilt attribute, which is used by Tilt.js to activate the tilt animation when hovered over.
    • The <img> tags inside the cards load images, which are used to visually represent the card.

  2. CSS Styling:

    • * { box-sizing: border-box; }: Ensures that padding and borders are included in the element's total width and height.
    • The .container is styled to use flexbox to arrange the cards in a row with equal spacing.
    • Each .card is given a fixed width and height, with rounded corners and a shadow effect to create the appearance of a 3D card.
    • card:hover: This provides a small scaling effect when the user hovers over the card to give it a subtle interactive feel.

  3. Tilt.js Setup:

    • Tilt.js is a lightweight library used to create 3D tilt animations on elements. It is initialized with specific options such as scale, maxTilt, speed, and easing.
    • scale: 1.1: Increases the card size when hovered for a more pronounced tilt effect.
    • maxTilt: 25: The card can tilt up to 25 degrees.
    • speed: 400: The transition speed for the tilt effect.
    • easing: Specifies the easing function for the tilt animation.

  4. jQuery:

    • jQuery is used to ensure that the DOM is fully loaded before applying the tilt() function to the .card elements.

Conclusion:

This setup creates an interactive, 3D tilt effect on the cards using Tilt.js, which is powered by jQuery for better browser compatibility. You can easily add or remove cards and customize the images as needed. The effect adds a professional touch to any website, especially for portfolios or product showcases.

Feel free to adapt the code to your blog content by following the structure and adding your own content!


Comments

Post a Comment

Popular posts from this blog

Lets build a Markdown blog using Next.js, Shadcn, Tailwind, Pieces, Remark & Rehype 🔥

 Building a Markdown blog using **Next.js**, **Shadcn**, **Tailwind CSS**, **Pieces**, **Remark**, and **Rehype** is a fantastic idea! This stack will give you a modern, performant, and highly customizable blog. Let’s break it down step by step. --- ### **1. Set Up Next.js Project** Start by creating a new Next.js project: ```bash npx create-next-app@latest my-markdown-blog cd my-markdown-blog ``` --- ### **2. Install Tailwind CSS** Install Tailwind CSS and configure it: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.js`: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = {   content: [     "./app/**/*.{js,ts,jsx,tsx}",     "./pages/**/*.{js,ts,jsx,tsx}",     "./components/**/*.{js,ts,jsx,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }; ``` Add Tailwind to your `globals.css`: ```css @tailwind base; @tailwind components; @...
Read more

React Portflio Website Basic to Advance

To build a React-based portfolio website with Tailwind CSS, follow these steps to integrate Tailwind and style your components. 1. Set Up Tailwind CSS in Your React Project First, create a new React project and install Tailwind CSS.   npx create-react-app portfolio-website  cd portfolio-website  npm install -D tailwindcss postcss autoprefixer  npx tailwindcss init After running ,    npx tailwindcss init   a    tailwind.config.js  file will be created. Now, configure Tailwind to purge unused styles by editing tailwind.config.js as follows: tailwind.config.js /** @type {import('tailwindcss').Config} */ module . exports = {   content : [     " ./src/**/*.{js,jsx,ts,tsx} " ,   ],   theme : {     extend : {},   },   plugins : [], } 2. Add Tailwind Directives to CSS Create a new file  src / index .css   (or edit the existing one) to include the Tailwind directives: sr...
Read more

Todo List app using html,js and tailwind.css with features login,logout,storing the data in localstorage addtodos,deletetodos and updating todos,toastify library and many more

Image
  Here's a fully functional To-Do List app with login/logout functionality, item management (add, edit, delete), and local storage for data persistence. The app uses HTML, CSS (with Tailwind CSS for design), and JavaScript for the logic. File Structure: index.html - The main structure of the app style.css - Custom styles (if needed) script.js - JavaScript logic for the app You can use Tailwind CSS CDN for simplicity to quickly apply beautiful styles. Features Breakdown: Login/Logout : The user can log in by entering a username and password. After logging in, they can manage their to-do list. If not logged in, they are redirected to the login screen. To-Do Management : The user can add, edit, and delete items from the to-do list. Local Storage : All data is stored in the browser's local storage, so the data persists even after the page is refreshed. Tailwind CSS : The app uses Tailwind CSS to create a clean, responsive, and modern design. You can run this code by creating th...
Read more