Progress-bar swiper [SCSS]

PHOTO

Fri Feb 16 2024 08:41:54 GMT+0000 (Coordinated Universal Time)

Saved by @homunculus #scss

.p-mainvisual {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    &__swiper {
        transition-timing-function: linear;
        &-slide {
            position: relative;
            overflow: hidden;
            height: 100vh;
            min-height: 660px;
            img {
                width: 100%;
                height: 100%;
                object-position: top;
                object-fit: cover;
            }
        }
        .swiper-wrapper img {
            width: 100%;
          }

    }
    &__container.swiper-container {
        padding-bottom: 5px;
        position: relative;
    }

    &__progress {
        position: absolute;
        left: 0;
        bottom: 3px;
        width: 0;
        height: 8px;
        background: $brand-color;
        z-index: 70;
        transition: linear;
    }

    &__scrollbar.swiper-scrollbar.swiper-scrollbar-horizontal {
        width: 100%;
        background: #e0eeea;
        left: 0;
        height: 6px;
        .swiper-scrollbar-drag {
            border-radius: 0;
            background-color: $brand-color;
        }
    }

    &__text {
        position: absolute;
        width: 100%;
        padding: 1rem;
        text-align: center;
        top: clamp(rem(140), 11.98vw, rem(230));
        left: 50%;
        transform: translateX(-50%);
        font-family: $font-family-noto;
        font-size: clamp(rem(50), 3.65vw, rem(70));
        font-weight: 700;
        z-index: 50;
        color: #fff;
        text-shadow: 0px 0px 3px #000;
    }

    &__buttons {
        position: absolute;
        display: flex;
        gap: 0 45px;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;
    }
}

// Phone
// --------------------------------------------------
@include media-breakpoint-sp {
    .p-mainvisual {
        &__swiper {
            &-slide {
                max-height: 100vh;
                height: 138vw;
                min-height: 580px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        &__buttons {
            bottom: 5%;
            gap: 0 12px;
            flex-wrap: wrap;
            flex-direction: row-reverse;
            justify-content: center;

        }

        &__text {
            font-size: rem(32);
            top: 140px;
            // line-height: 1.3;
         }
    }
}

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

Swiper with progress-bar

@homunculus

Progress-bar swiper [HTML] Progress-bar swiper [Java Script] Progress-bar swiper [SCSS]

Strip-unit Function | CSS-Tricks

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @return {Number} - Unitless number
@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

Responsive iframe class

.iframe-container {
      // overflow: hidden;
      // /* 16:9 aspect ratio */
      // padding-top: 56.25%;
      // position: relative;
      width: 100%;
      padding-top: 100%;
      position: relative;
      iframe {
         // border: 0;
         // height: 100%;
         // left: 0;
         // position: absolute;
         // top: 0;
         // width: 100%;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
    }

利用 Motion-Path 绘制路径动画

html,

body {

  width: 0%;

  height: 100%;

  display: flex;

}



.wrapper {

  position: relative;
10
  margin: auto;

}



.cyclist {

  width: 48px;

  height: 48px;

  position: absolute;

  transform: translateY(-50%);  // position the rider above the curve. could be done with offset-position but it has no browser support yet

  offset-path: path("M1 260C65.034 260.999 102.054 253.632 130.069 241.15C158.083 228.668 177.093 244.645 1.612 258.125C246.13 271.606 296.157 293.574 342.181 258.125C388.6 222.677 405.715 140.297 479.754 139.798C553.793 139.298 591.313 207.699 667.854 258.125C744.395 308.552 782.416 287.783 802.425 269.608C846.949 229.167 924.49 109.841 943 1");

  animation: ride-hills 10s ease-in infinite;
20
}
21

@function rem-calc($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

scss-animation-reduce

@mixin animete-reduce {
  @media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
      animation-delay: -1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-delay: 0s !important;
      transition-duration: 0s !important;
    }
  }
}

scss-light-mode

@mixin light-mode {
	@media (prefers-color-scheme: light) {
      @content;
    }
}

CSS-Tricks - walk

/// Apply `$function` with `$args` to each item from `$list`.
/// @author Kitty Giraudel
/// @param {List} $list - List of items
/// @param {String} $function - Function to apply to every item from `$list`
/// @param {Arglist} $args - Extra arguments to pass to `$function`
/// @return {List}
/// @throw There is no `#{$function}` function.
@function walk($list, $function, $args...) {
  @if not function-exists($function) {
    @error "There is no `#{$function}` function.";
  }
  
  @for $i from 1 through length($list) {
    $list: set-nth($list, $i, call($function, nth($list, $i), $args...));
  }
  
  @return $list;
}

#scss #squarespace

Sideways Text for the Left Side

//FOR THE PRE STYLE MONOCODE FONT IN SS ONLY ONLY
[data-section-id="605471fe6055c808f219a123"] pre { 
    margin-bottom: 0px;
    margin-top: 0;
    transform: rotate(
-90deg);
    transform-origin: top left;
    position: absolute;
    width: 200px;
    bottom: -100px;
}
//IS THERE WHERE DOES THIS GO IN THE SCSS??
.sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3) {
    word-wrap: break-word;
}

#squarespace #scss #images

Define Maximum Width of Images on Desktop and Mobile

//If you wish to apply this on both desktop and mobile
#blockID {
  max-width:150px;
  margin:auto;
}

//If you wish to apply this on mobile only
@media screen and (max-width:767px) {

#blockID {
  max-width:150px;
  margin:auto;
}

}

#scss #squarespace #ghostplugins

Full Width Image Card

// Full Width Image Card - Page Section //

[data-section-id="012345"] {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
    .content-wrapper  {
      padding: auto !important;
      margin: 0px auto;
      display: contents;
    }
.sqs-layout .sqs-row .sqs-block {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}}

// Full Width Image Card - Text Padding //
  
.image-card-wrapper .sqs-dynamic-text-container {
  padding: 40px !important;
}

#scss #splitsection

@media screen and (min-width:767px) {

[data-current-styles*='"customContentWidth": 49'].horizontal-alignment--left {
  .section-background {
  
    width:50% !important;
    z-index:1 !important;
    overflow:visible;
  }
  
  .section-background-overlay {
    opacity:1 !important;
    left:100%;
    right:-100%;
  }
  
   .content-wrapper {
     width: 50%;
     margin-left: 50% !important;
     box-sizing: border-box;
     z-index:1;
  }
  
  .content {
    width:100% !important;
  }
}
  
}

@media screen and (min-width:767px) {

[data-current-styles*='"customContentWidth": 49'].horizontal-alignment--right {
  .section-background {
  
    width:50% !important;
    left:50%;
    z-index:1 !important;
    overflow:visible;
  }
  
  .section-background-overlay {
    opacity:1 !important;
    left:-100%;
    right:100%;
  }
  
   .content-wrapper {
     width: 50%;
     margin-left: 0% !important;
     box-sizing: border-box;
     z-index:1;
  }
  
  .content {
    width:100% !important;
  }
}
  
}

#color #scss #mixin

SASS Color Weight Mixin - Stack Overflow

@mixin color-weight ($class, $base-color, $weight: 4) {
  $bg-color: null;

  @for $i from 1 through 8 {
    @if $i < 4 {
      $weight: $weight - 1;
      $bg-color: lighten($base-color, $weight * 10%);
    } @else if $i == 4 {
      $weight: 0;
      $bg-color: $base-color;
    } @else {
      $weight: $weight + 1;
      $bg-color: darken($base-color, $weight * 10%);
    }

    .#{$class}-#{$i} { background-color: $bg-color; }
  }
}

@include color-weight(bg-blue, #1483ff);
@include color-weight(mad, red);

Material Shadows Mixin | CSS-Tricks - CSS-Tricks

/// Gives a card depth effect.
/// @param {Number} $depth - depth level (between 1 and 5)
/// @link http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
/// @requires {function} top-shadow
/// @requires {function} bottom-shadow
@mixin card($depth) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 5 {
    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
  } @else {
    box-shadow: bottom-shadow($depth), top-shadow($depth);  
  }
}

Material Shadows Mixin | CSS-Tricks - CSS-Tricks

/// Computes a top-shadow for a card effect.
/// @param {Number} $depth - depth level
/// @return {List}
@function top-shadow($depth) {
  $primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
  $blur: nth(1.5 3 10 14 19, $depth) * 4px;
  $color: rgba(black, nth(.12 .16 .19 .25 .30, $depth));

  @return 0 $primary-offset $blur $color;
}

/// Computes a bottom-shadow for a card effect.
/// @param {Number} $depth - depth level
/// @return {List}
@function bottom-shadow($depth) {
  $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
  $blur: nth(1 3 3 5 6, $depth) * 4px;
  $color: rgba(black, nth(.24 .23 .23 .22 .22, $depth));

  @return 0 $primary-offset $blur $color;
}

Browse more snippets >>