Un code de Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

3 September 2024

Marquee infini uniquement en CSS

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Live Demo - Yenilenmiş Versiyon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow" />
    <link rel="stylesheet" href="styles.css">
</head>
<body>

CSS

/*--------------------------------------------------------------
/** 1. Normalize
--------------------------------------------------------------*/
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: 'Poppins', Roboto, sans-serif;
}
html {
  font-size: 100%;
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-style: normal;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}
audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
  outline: 0;
  text-decoration: none;
  cursor: pointer;
  -webkit-text-decoration-skip: objects;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b, strong, .strong {
  font-weight: bolder;
}
dfn {
  font-style: italic;
}
mark {
  background-color: #ffdd00;
  color: #333;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dd, small {
  padding: 0;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
  display: block;
}
figure {
  margin: 1em 40px;
}
hr {
  height: 0;
  overflow: visible;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: Courier, monospace;
  font-size: 1em;
}
blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
}
blockquote, q {
  quotes: "" "";
}
button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button, input {
  overflow: visible;
}
button, select {
  text-transform: none;
}
select {
  text-indent: 45px;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  padding: 0;
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
td, th {
  padding: 0;
}

/*--------------------------------------------------------------
/** 2. Base Styles
--------------------------------------------------------------*/
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  box-sizing: border-box;
}
body {
  font-family: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  line-height: 180%;
  color: #555555;
}
body.no-scroll {
    overflow: hidden;
}
a {
  color: #333;
}
a:hover {
  color: #333;
  text-decoration: none;
}
.light a {
  color: #f2f2f2;
}
.light a:hover,
.light a:active,
.light a:focus {
  color: #f2f2f2;
}
.light b, .light strong {
  color: #f2f2f2;
}
ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  margin-left: 0;
  padding: 0;
  padding-left: 30px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-top: 5px;
  margin-bottom: 0;
}
ul li, ol li {
  margin-bottom: 5px;
  outline: 0;
}
ul li.active a{
  color: #333;
}
ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  list-style: none;
  margin-left: -0.5rem;
}
.list-inline > li {
  display: inline-block;
  padding-left: 1rem;
  padding-right: 1rem;
}
dl {
  margin-top: 0;
  margin-bottom: 2rem;
}
dt,
dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  outline: 0;
}
figure {
  margin: 0;
}
img {
  display: inline-block;
  border: 0;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
::selection {
  background: rgba(70, 150, 230, 0.8);
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: rgba(70, 150, 230, 0.8);
  color: #fff;
  text-shadow: none;
}
::-webkit-input-placeholder {
  color: #757575;
  -webkit-transition: color .2s;
  transition: color .2s;
}
::-moz-placeholder {
  color: #757575;
  -webkit-transition: color .2s;
  transition: color .2s;
}
:-ms-input-placeholder {
  color: #757575;
  -webkit-transition: color .2s;
  transition: color .2s;
}
::placeholder {
  color: #757575;
  -webkit-transition: color .2s;
  transition: color .2s;
}

.nav {
  position: fixed;
  width: 200px;
  bottom: 0;
  right: 200px;
  padding: 20px;
  border-radius: 10px 0 0 10px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #e8e8e8;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.3s ease-in;
}
.nav.show {
  transform: translate3d(0, 0, 0);
}
.btn {
  display: block;
  padding: 0px 10px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 8px;
  background: #4596e6;
  color: #fff;
  box-shadow: rgba(0,0,0,0.1) 0px 0px 20px;
  transition: background 0.3s ease-out;
}
.btn:hover {
  background: #74b2ee;
}
.devices {
  display: flex;
}
.devices a {
  padding: 2px;
}
#template-selector {
  background: #222;
}
#iframe-view {
  margin: auto;
  background: #fff;
  height: 100vh;
}
body {
  overflow: hidden;
  text-align: center;
  background: #222222;
}
.btn-settings {
  padding: 12px;
  border: 5px solid #fff;
  width: 150px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 50px;
  transition: transform 0.3s ease-out;
}
.btn-settings:hover {
  transform: scale(1.1);
  color: #fff;
}
/* Kaldırıldı */"
@media only screen and (max-width: 991px) {
  a.device {
    display:none;
  }
}

JS

(function($) {

"use strict";

$(document).ready(function(){

// Nav menüsünü göster/gizle butonu (aktif değil şu anda)
    $('.btn-settings').on('click', function(e) {
      e.preventDefault();
      $('#demo-page-nav').toggleClass('show');
    });

// Sayfa yüklendiğinde nav menüsünü göster
    setTimeout(function() {
      $('#demo-page-nav').addClass('show');
    }, 1000);

// Template seçici dropdown değişikliği
    $('#template-selector').on('change', function() {
      var demo_url = this.value;
      var product_url = $(this).find(':selected').data('product');

$("#iframe-view").attr("src", demo_url);
      $("#product-link").attr("href", product_url);
    });

// Cihaz boyutu değiştirme
    $('a.device').click(function(e){
      e.preventDefault();
      var screen_size = $(this).attr('href');
      var iframe_width = 640;
      var iframe_height = 600;

// Aktif cihaz butonunu vurgulama
      $('a.device').removeClass('active');
      $(this).addClass('active');

switch(screen_size) {
        case '#desktop':
          iframe_width = "100%";
          iframe_height = "100%";
          break;

case '#laptop':
          iframe_width = "1280px";
          iframe_height = "1024px";
          break;

case '#tab':
          iframe_width = "1024px";
          iframe_height = "1366px";
          break;

default:
        case '#phone':
          iframe_width = "375px";
          iframe_height = "812px";
          break;
      }
      
      // iframe boyutunu güncelle
      $('#iframe-view').css({
        "width": iframe_width,
        "height": iframe_height,
        "transition": "all 0.3s ease"
      });

// Telefon boyutunda ise ekranı ortala
      if (screen_size === "#phone") {
        $('#iframe-view').css({
          "margin": "0 auto",
          "display": "block"
        });
      } else {
        $('#iframe-view').css({
          "margin": "auto"
        });
      }
    });

// Satın alma butonu kaldırıldı

});

})(jQuery);

Un code de Metehan

Recommandé

GRANDE ROUE

Un code par alejandrokundrah

Marquee infini uniquement en CSS

HTML

CSS

JS

Recommandé

GRANDE ROUE

Un code par alejandrokundrah

Marquee infini uniquement en CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS