I am currently developing a new website and I was intrigued by the slider effect on Apple and IBM's websites.
For reference, you can check out how it works on sites like: and
I noticed that the text and images slide in opposite directions, which seems to be achieved through CSS3. However, I am trying to understand how they manage to make the onclick event of the buttons work without changing classes.
Any insights or tips would be greatly appreciated!
When examining the Apple slider, there are several interesting elements at play.
The utilization of JavaScript to capture the click event triggers a change in attribute within the <ul> element, subsequently altering the CSS and initiating an animation through CSS3 transitions.
Upon inspecting the code:
A portion of the HTML code reveals the presence of the exited and entered attributes, which are modified by JavaScript when a new section needs to be displayed (via onclick).
<ul class="ul-slider" page="1" style="width: 970px; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 5px; " exited="previous">
<li class="pb-macbook" exited="previous">...</li>
<li class="pb-macbookpro" exited="previous">...</li>
...
</ul>
...
<ul class="ul-slider" page="3" style="width: 930px; margin-top: 0px; margin-right: 25px; margin-bottom: 0px; margin-left: 25px; " entered="next">
<li class="pb-keyboard started" entered="next">...</li>
<li class="pb-magicmouse started" entered="next">...</li>
<li class="pb-magictrackpad started" entered="next">...</li>
...
</ul>
Additionally, a review of the CSS () showcases various CSS3 transition/transforms properties and styles.
A snippet illustrates how different values of the entered or exited attributes impact the transforms, which are then animated by the transitions.
.productbrowser ul.exited ,
.productbrowser ul[exited] { display:none; }
.productbrowser li[exited] ,
.productbrowser li[toenter] { -webkit-animation-name:none; -webkit-animation-duration:0;
.productbrowser li[exited="next"] ,
.productbrowser li[toenter="next"],
.productbrowser li[enter="next"] { -webkit-transform:translate3d( 3000px, 0, 0); }
The JavaScript has been minified, making it challenging to demonstrate its functionality, but it is not overly complex.
I trust this explanation proves informative and clear :)
There are numerous JQuery scripts available online that can be used to create sliders like this. JQuery offers a wide variety of options for slider implementation.
You can also achieve similar effects using pure javascript files.
For more information and resources on creating menus and navigation elements, check out Dynamic Drive. You can find the source code needed to customize and optimize your search.
I'm currently working with JavaScript and TypeScript. Within my code, I encountered a scenario where I have a string that might contain certain tags indicating importance or urgency. Here are a couple of examples: A: "Remind me to go to the store to ...
Despite not utilizing any of the props supplied to the component, will it still re-render when the props change? class MyComponent extends React.Component { constructor(props) { super(props); const { propValue } = props; // do something wi ...
Although it seems simple, I am trying to design a website background with a container that has semi-transparent properties. When I include opacity: 0.5; within the #content code, the entire container, along with its content and text, becomes transparent. ...
Just starting out with Vue and experimenting with vue-router, I'm trying my hand at dynamically loading components without relying on additional libraries like webpack. So far, I've set up an index page and a router. Upon initial page load, I not ...
Every time I attempt to retrieve the contents of an id using document.getElementById, I keep receiving a value of null. Below is a snippet of the code: <input-layout v-if="edit" label="Status" class="grayout"> &l ...
I'm experiencing a peculiar issue where the logic inside the change() event handler is not triggering when the value is set using val(), but it does work when the user manually selects a value with their mouse. Any idea why this might be happening? & ...
I have a scenario where I have two divs named left and right. The left div contains a list of bullets (li elements) and is floated to the left, while the right div has text and HTML content. At times, either the left or the right div may be taller than the ...
I recently implemented a code snippet that allows users to download files to cache for offline viewing. You can check it out here: While the code works well, I've noticed that for larger files, the loading process can be a bit slow. I am looking for ...
I'm looking to transform an array of objects into a final output of objects. My initial array of objects looks like this: [ { "id": "11", "value" : "9999","sample":"1"}, { "id": "22", "value" : "8888","sample":"2"}, { "id": "33", "value" : ...
Consider this straightforward Angular snippet: <input type="text" ng-model="name" /> <p>Hello {{name}}</p> When entering the text <script>document.write("Hello World!");</script>, it appears to be displayed as is without bei ...
In our Angular application, we have integrated the latest version of Forge Viewer and are storing the current state of the viewer in our database for future restoration. After thorough testing, we discovered that isolated nodes are not being saved correct ...
Yay, I figured it out! I've been using video.js to play videos on a website that needs to work offline too. Unfortunately, using flash is not an option due to compatibility issues. So, I decided to write my own fallback solution. For Internet Explor ...
Currently, I am juggling multiple projects simultaneously and facing the issue of each project having a different node module registry. For instance, project A sources its modules from http://registroy.foo.com, while project B pulls modules from http://re ...
Recently diving into the world of vanilla JS and WebGL content, I managed to create a particle text effect that distorts on mouse hover. These particles are interconnected with lines, as shown in the code snippet below. const canvas = document.getElementBy ...
Node.js utilizes a stream as an abstract interface for handling streaming data. The node:stream module offers an API to implement this stream interface. During my exploration of NodeJs streams, I encountered confusion over whether a stream was involved in ...
I am currently using jQuery v1.11.2 and have set up a basic JSFiddle at this link (http://jsfiddle.net/k1g3upbv/). The layout may not be ideal in JSFiddle due to the integration of Twitter Bootstrap within my project. I quickly put together the JSFiddle, o ...
My goal is to dynamically generate an object: newData = { column1: "", column2: "", column3: "", ... columnN: "" } The column names are derived from another array of objects called tableColumns, which acts as a global variable: table ...
I need to be able to use $regex in order to search for any words that contain a specific keyword provided by the user, but I'm experiencing issues. Here's what I have so far: aggregatePipeline.push({ $match: { name: { $reg ...
Currently, I am utilizing a directive to properly display currency format. You can find the directive at this URL: http://jsfiddle.net/ExpertSystem/xKrYp/ Is there a way to remove the dollar symbol from the output value and only retain the converted amoun ...
I am in the process of developing a messaging application. User1 sends out a message, and I want to display how long ago this message was posted to other users - for example, "Posted 9 min. ago", similar to what we see on sites like SO or Facebook. To ach ...