{"id":851,"date":"2018-08-08T11:01:40","date_gmt":"2018-08-08T09:01:40","guid":{"rendered":"https:\/\/www.benjaminsimier.com\/creer-3-vues-en-css-et-jquery-exemples\/"},"modified":"2019-11-07T12:09:19","modified_gmt":"2019-11-07T11:09:19","slug":"create-3-views-in-css-and-jquery","status":"publish","type":"post","link":"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/","title":{"rendered":"Create 3 views in CSS and Jquery + examples"},"content":{"rendered":"\n<p>A few months ago I shared here one of my codes which allowed to realize simply a \u201cdouble views\u201d effect in CSS.<br>I put you\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/www.benjaminsimier.com\/en\/double-view-css-project\/\" target=\"_blank\">the direct link to the article here<\/a>\u00a0!<\/p>\n\n\n\n<p class='codepen'  data-height='364' data-theme-id='0' data-slug-hash='WMyQJK' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen 2 views with mouseover (Only CSS) by Benjamin Simier (@benjaminsimier) on CodePen.<\/p>\n\n\n\n\n<p>Today I decided to improve my project and share it with you. The idea was to create, not a \u201c2 views\u201d but a \u201c3 views\u201d while keeping the original idea (animation, layout, \u2026)<br>I realized 2 projects, the first one just uses CSS and there is no animation on the width of the views. The second is an evolution of the first and integrates in addition to the Jquery.<\/p>\n\n\n\n<p>Whether for the first version or the second, I decided to go on an HTML list (ul> li), which will allow me to count the elements li.<\/p>\n\n\n\n<h2>First version (CSS only)<\/h2>\n\n\n\n<p>As you can see, there is no real animation, except a change of opacity when the cursor moves.<\/p>\n\n\n\n<p class='codepen'  data-height='354' data-theme-id='0' data-slug-hash='ajjBLb' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen 3 views simple CSS by Benjamin Simier (@benjaminsimier) on CodePen.<\/p>\n\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/benjaminsimier\/pen\/ajjBLb\" target=\"_blank\">See the project on CodePen<\/a><\/p>\n\n\n\n<h2>Advanced version (CSS + Jquery)<\/h2>\n\n\n\n<p>This version adds the animation of the width of the views thanks to the Jquery.<\/p>\n\n\n\n<p class='codepen'  data-height='379' data-theme-id='0' data-slug-hash='ZjjBZz' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen 3 views with Jquery (mouse over) by Benjamin Simier (@benjaminsimier) on CodePen.<\/p>\n\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/benjaminsimier\/pen\/ZjjBZz\" target=\"_blank\">See the project on CodePen<\/a><\/p>\n\n\n\n<p>To use the Jquery functions, use the CDN :\u00a0https:\/\/code.jquery.com\/jquery-3.3.1.min.js<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A few months ago I shared here one of my codes which allowed to realize simply a \u201cdouble views\u201d effect in CSS.I put you\u00a0the direct link to the article here\u00a0! Today I decided to improve my project and share it with you. The idea was to create, not a \u201c2 views\u201d but a \u201c3 views\u201d [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":719,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[48],"tags":[54,55,56,62,63],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.8 (Yoast SEO v20.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create 3 views in CSS and Jquery + examples - Benjamin Simier<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create 3 views in CSS and Jquery + examples\" \/>\n<meta property=\"og:description\" content=\"A few months ago I shared here one of my codes which allowed to realize simply a \u201cdouble views\u201d effect in CSS.I put you\u00a0the direct link to the article here\u00a0! Today I decided to improve my project and share it with you. The idea was to create, not a \u201c2 views\u201d but a \u201c3 views\u201d [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Benjamin Simier\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BSimierWeb\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/BSimierWeb\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-08T09:01:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-11-07T11:09:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/3-vues.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"610\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Benjamin Simier\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin Simier\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/\"},\"author\":{\"name\":\"Benjamin Simier\",\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086\"},\"headline\":\"Create 3 views in CSS and Jquery + examples\",\"datePublished\":\"2018-08-08T09:01:40+00:00\",\"dateModified\":\"2019-11-07T11:09:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/\"},\"wordCount\":282,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086\"},\"keywords\":[\"codepen\",\"css\",\"development\",\"javascript\",\"jquery\"],\"articleSection\":[\"Digital trends\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/\",\"url\":\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/\",\"name\":\"Create 3 views in CSS and Jquery + examples - Benjamin Simier\",\"isPartOf\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/#website\"},\"datePublished\":\"2018-08-08T09:01:40+00:00\",\"dateModified\":\"2019-11-07T11:09:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/www.benjaminsimier.com\/en\/home\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create 3 views in CSS and Jquery + examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.benjaminsimier.com\/#website\",\"url\":\"https:\/\/www.benjaminsimier.com\/\",\"name\":\"Benjamin Simier\",\"description\":\"UI\/UX designer &amp; d\u00e9veloppeur front-end\",\"publisher\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.benjaminsimier.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086\",\"name\":\"Benjamin Simier\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg\",\"contentUrl\":\"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg\",\"width\":872,\"height\":1200,\"caption\":\"Benjamin Simier\"},\"logo\":{\"@id\":\"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/BSimierWeb\",\"https:\/\/www.instagram.com\/benjamin_simier\/\",\"https:\/\/www.linkedin.com\/in\/benjaminsimier\/\"],\"url\":\"https:\/\/www.benjaminsimier.com\/en\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create 3 views in CSS and Jquery + examples - Benjamin Simier","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Create 3 views in CSS and Jquery + examples","og_description":"A few months ago I shared here one of my codes which allowed to realize simply a \u201cdouble views\u201d effect in CSS.I put you\u00a0the direct link to the article here\u00a0! Today I decided to improve my project and share it with you. The idea was to create, not a \u201c2 views\u201d but a \u201c3 views\u201d [&hellip;]","og_url":"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/","og_site_name":"Benjamin Simier","article_publisher":"https:\/\/www.facebook.com\/BSimierWeb","article_author":"https:\/\/www.facebook.com\/BSimierWeb","article_published_time":"2018-08-08T09:01:40+00:00","article_modified_time":"2019-11-07T11:09:19+00:00","og_image":[{"width":1200,"height":610,"url":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2019\/11\/3-vues.png","type":"image\/png"}],"author":"Benjamin Simier","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Benjamin Simier","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/#article","isPartOf":{"@id":"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/"},"author":{"name":"Benjamin Simier","@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086"},"headline":"Create 3 views in CSS and Jquery + examples","datePublished":"2018-08-08T09:01:40+00:00","dateModified":"2019-11-07T11:09:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/"},"wordCount":282,"commentCount":0,"publisher":{"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086"},"keywords":["codepen","css","development","javascript","jquery"],"articleSection":["Digital trends"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/","url":"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/","name":"Create 3 views in CSS and Jquery + examples - Benjamin Simier","isPartOf":{"@id":"https:\/\/www.benjaminsimier.com\/#website"},"datePublished":"2018-08-08T09:01:40+00:00","dateModified":"2019-11-07T11:09:19+00:00","breadcrumb":{"@id":"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.benjaminsimier.com\/en\/create-3-views-in-css-and-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.benjaminsimier.com\/en\/home\/"},{"@type":"ListItem","position":2,"name":"Create 3 views in CSS and Jquery + examples"}]},{"@type":"WebSite","@id":"https:\/\/www.benjaminsimier.com\/#website","url":"https:\/\/www.benjaminsimier.com\/","name":"Benjamin Simier","description":"UI\/UX designer &amp; d\u00e9veloppeur front-end","publisher":{"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.benjaminsimier.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/b4ace0b846b0758fc397e877fc2bb086","name":"Benjamin Simier","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/image\/","url":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg","contentUrl":"https:\/\/www.benjaminsimier.com\/wp-content\/uploads\/2022\/05\/Perso_4.jpeg","width":872,"height":1200,"caption":"Benjamin Simier"},"logo":{"@id":"https:\/\/www.benjaminsimier.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BSimierWeb","https:\/\/www.instagram.com\/benjamin_simier\/","https:\/\/www.linkedin.com\/in\/benjaminsimier\/"],"url":"https:\/\/www.benjaminsimier.com\/en\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/851"}],"collection":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/comments?post=851"}],"version-history":[{"count":1,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/851\/revisions"}],"predecessor-version":[{"id":852,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/posts\/851\/revisions\/852"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/media\/719"}],"wp:attachment":[{"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/media?parent=851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/categories?post=851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.benjaminsimier.com\/en\/wp-json\/wp\/v2\/tags?post=851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}