Create an animation effect on HTML tab content to slide in and out smoothly, resembling a carousel, using

Question

Create an animation effect on HTML tab content to slide in and out smoothly, resembling a carousel, using

I am new to animation and looking for help with creating a carousel effect on my HTML tabs using CSS. I want the contents to slide like in this example: . Any guidance or tips on how to achieve this would be greatly appreciated.

<div class="service-tabs" >
        <ul class="nav nav-tabs">
            <li ng-class="{'active':tabSelected == 'one'}" ng-click="tabSelected = 'one'">TAB ONE</li>
            <li ng-class="{'active':tabSelected == 'two'}" ng-click="tabSelected = 'two'">TAB TWO</li>
            <li ng-class="{'active':tabSelected == 'three'}" ng-click="tabSelected = 'three'">TAB THREE</li>
        </ul>
        <div class="tab-contents">
            <div class="tab-content" ng-show="tabSelected == 'one'" ng-class=" tabSelected == 'one' ? 'active' : 'inactive'">
                <div class="flex-it risk-factors">
                   <h1>One</h1>
                   <p>Lorem dim sum Cha siu bao Lo mai gai baked barbecue pork bao Egg custard tarts Popular shumai cha siu bao A creamy mango pudding Chiu-chao</p>
                </div>
            </div>
            <div class="tab-content" ng-show="tabSelected == 'two'" ng-class=" tabSelected == 'two' ? 'active' : 'inactive' " style="width: 100%">
                 <h1>Two</h1>
                   <p>Bacon ipsum dolor amet beef ham hock salami cupim shankle kevin leberkas landjaeger ham. Prosciutto filet mignon bresaola rump. Tail ground round beef tri-tip turducken, meatloaf prosciutto short ribs filet mignon t-bone hamburger kevin pork chop. Meatball rump chicken hamburger drumstick, boudin pancetta short ribs ground round. Turkey cupim porchetta salami sausage t-bone pig. Bresaola t-bone tenderloin pork shoulder. Tongue pig corned beef...
            </div>
            <div class="tab-content" ng-show="tabSelected == 'three'" ng-class=" tabSelected == 'three' ? 'active' : 'inactive' ">
                 <h1>Three</h1>
                   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recen...
            </div>
        </div>
    </div>

Here is the Plunker I have created so far: http://plnkr.co/edit/lImVRKBUcTH15xJm66q6?p=preview

html angularjs css css-animations

Answer 1

Answer №1

Alright, here's a method to tackle this. The key is to establish the default transition-delay on the content components with an incredibly high value so they cannot revert to their original state unless prompted by user interaction through one of the tabs. Afterward, it's all about the fundamentals: sibling selectors, transitions, and positioning.

*{box-sizing:border-box;color:#000;font-family:sans-serif;font-size:14px;margin:0;outline:none;padding:0;}
body{
    margin:10px;
}
body>p{
    cursor:pointer;
    line-height:30px;
    padding:0 20px;
    display:inline-block;
}
body>p:focus{
    background:#ccc;
}
body>div{
    border:2px solid #ccc;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
}
div>div{
    display:inline-block;
    left:0;
    padding:10px;
    position:relative;
    transition:left .5s linear 9999s;
    white-space:initial;
    width:calc(100% - 4px);
}
#tab1:focus~div>div{
    left:0%;
    transition-delay:0s;
}
#tab2:focus~div>div{
    left:-100%;
    transition-delay:0s;
}
#tab3:focus~div>div{
    left:-200%;
    transition-delay:0s;
}
h1{margin:0 0 10px;}

<p id="tab1" tabindex="-1">Tab 1</p>
<p id="tab2" tabindex="-1">Tab 2</p>
<p id="tab3" tabindex="-1">Tab 3</p>
<div>
    <div>
        <h1>Page One</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero libero. Etiam a dui scelerisque, cursus ex non, dapibus nibh. Donec ac venenatis ligula. Curabitur mollis libero a elit tempus pretium. Ut ultricies viverra mollis. In efficitur purus at cursus pulvinar. Ut condimentum metus at ante viverra porttitor. Nullam vel purus mi. Nunc vel suscipit sapien, id faucibus sem. Sed tristique laoreet purus commodo molestie. Nulla volutpat feugiat enim at volutpat. Fusce dictum augue felis, sit amet sodales ipsum ...
    </div>
    <div>
        <h1>Page Two</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero libero. Etiam a dui scelerisque, cursus ex non, dapibus nibh. Donec ac venenatis ligula. Curabitur mollis libero a elit tempus pretium. Ut ultricies viverra mollis. In efficitur purus at cursus pulvinar. Ut condimentum metus at ante viverra porttitor. Nullam vel purus mi. Nunc vel suscipit sapien, id faucibus sem. Sed tristique laoreet purus commodo molestie. Nulla volutpat feugiat enim at volutpat. Fusce dictum augue felis, sit amet sodales ipsum...
    </div>
    <div>
        <h1>Page Three</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero libero. Etiam a dui scelerisque, cursus ex non, dapibus nibh. Donec ac venenatis ligula. Curabitur mollis libero a elit tempus pretium. Ut ultricies viverra mollis. In efficitur purus at cursus pulvinar. Ut condimentum metus at ante viverra porttitor. Nullam vel purus mi. Nunc vel suscipit sapien, id faucibus sem. Sed tristique laoreet purus commodo molestie. Nulla volutpat feugiat enim at volutpat. Fusce dictum augue felis, sit amet sodales ipsum...
    </div>
</div>

Answer 2

Alright, here's a method to tackle this. The key is to establish the default transition-delay on the content components with an incredibly high value so they cannot revert to their original state unless prompted by user interaction through one of the tabs. Afterward, it's all about the fundamentals: sibling selectors, transitions, and positioning.

*{box-sizing:border-box;color:#000;font-family:sans-serif;font-size:14px;margin:0;outline:none;padding:0;}
body{
    margin:10px;
}
body>p{
    cursor:pointer;
    line-height:30px;
    padding:0 20px;
    display:inline-block;
}
body>p:focus{
    background:#ccc;
}
body>div{
    border:2px solid #ccc;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
}
div>div{
    display:inline-block;
    left:0;
    padding:10px;
    position:relative;
    transition:left .5s linear 9999s;
    white-space:initial;
    width:calc(100% - 4px);
}
#tab1:focus~div>div{
    left:0%;
    transition-delay:0s;
}
#tab2:focus~div>div{
    left:-100%;
    transition-delay:0s;
}
#tab3:focus~div>div{
    left:-200%;
    transition-delay:0s;
}
h1{margin:0 0 10px;}

<p id="tab1" tabindex="-1">Tab 1</p>
<p id="tab2" tabindex="-1">Tab 2</p>
<p id="tab3" tabindex="-1">Tab 3</p>
<div>
    <div>
        <h1>Page One</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero libero. Etiam a dui scelerisque, cursus ex non, dapibus nibh. Donec ac venenatis ligula. Curabitur mollis libero a elit tempus pretium. Ut ultricies viverra mollis. In efficitur purus at cursus pulvinar. Ut condimentum metus at ante viverra porttitor. Nullam vel purus mi. Nunc vel suscipit sapien, id faucibus sem. Sed tristique laoreet purus commodo molestie. Nulla volutpat feugiat enim at volutpat. Fusce dictum augue felis, sit amet sodales ipsum ...
    </div>
    <div>
        <h1>Page Two</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero libero. Etiam a dui scelerisque, cursus ex non, dapibus nibh. Donec ac venenatis ligula. Curabitur mollis libero a elit tempus pretium. Ut ultricies viverra mollis. In efficitur purus at cursus pulvinar. Ut condimentum metus at ante viverra porttitor. Nullam vel purus mi. Nunc vel suscipit sapien, id faucibus sem. Sed tristique laoreet purus commodo molestie. Nulla volutpat feugiat enim at volutpat. Fusce dictum augue felis, sit amet sodales ipsum...
    </div>
    <div>
        <h1>Page Three</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero libero. Etiam a dui scelerisque, cursus ex non, dapibus nibh. Donec ac venenatis ligula. Curabitur mollis libero a elit tempus pretium. Ut ultricies viverra mollis. In efficitur purus at cursus pulvinar. Ut condimentum metus at ante viverra porttitor. Nullam vel purus mi. Nunc vel suscipit sapien, id faucibus sem. Sed tristique laoreet purus commodo molestie. Nulla volutpat feugiat enim at volutpat. Fusce dictum augue felis, sit amet sodales ipsum...
    </div>
</div>

Create an animation effect on HTML tab content to slide in and out smoothly, resembling a carousel, using

Answer №1

Similar questions

Tips for using "scoped" styles effectively in VueJS single file components

Show outcomes in a single div with 2 columns

Exploring the connection between an image and its bounding box

Mysterious gap found between image and table

Passing a div's ID value using AngularJS AJAX to store it in a PHP variable

What methods can be used to modify the appearance of the cursor depending on its position?

Is there a way to have a content's columns adjust to the size of an image?

Using the <video /> tag on a Next.JS page generated on the server side leads to hydration issues

Issue with Angular failing to fetch information from an external JSON file

Implementing PHP code in HTML file

css label not behaving properly when clicked

Displaying arrays in tabular and grid formats using PHP

Building a hyperlink from a textbox input: A step-by-step guide

IE encounters an absolute z-index problem when expanding concealed content

Exploring ways to traverse through Map values

A step-by-step guide on showcasing freshly submitted input data through Ajax

Ensure the calling object is retained during the resolution of an Angular promise

How can we prevent the text from shifting when the border width is adjusted

Ribbon design in LESS/CSS does not maintain its structure when resized in Google

Changing various $scope object properties using ng-model