Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/diazdavilajesus16-stack/Sevicheria-Mar-sabroso/llms.txt

Use this file to discover all available pages before exploring further.

Cevichería El Sabor Marino uses several layered animation systems: CSS keyframe animations power the ocean background (bubbles, swimming fish, and swaying seaweed), vanilla JavaScript detects when sections enter the viewport and triggers scroll-reveal transitions, and two carousel libraries handle the hero slideshow and dish/promotion carousels. This page documents each system, where it lives in the codebase, and how to adjust or disable it.

​
Scroll-reveal animations

When a section scrolls into view, the JavaScript at the bottom of core/templates/home.html adds a .show class, triggering a CSS transition. There are three reveal classes:
ClassEffect
.scroll-revealFades in from slightly below
.scroll-leftSlides in from the left
.scroll-rightSlides in from the right
These classes start hidden in CSS (opacity 0, translated off-screen). Adding .show transitions them to their final visible state.

​
How sections use reveal classes

home.html
<!-- Menu section -->
<section class="scroll-reveal wave-bottom">...</section>

<!-- Promotions section -->
<section class="scroll-left wave-bottom">...</section>

<!-- About section -->
<section class="scroll-reveal wave-top wave-bottom">...</section>

<!-- Team / chef section -->
<section class="scroll-left wave-top wave-bottom">...</section>

<!-- Contact section -->
<section class="scroll-right wave-top">...</section>

​
The scroll detection JavaScript

The script runs on scroll and on initial load. It checks each reveal element’s position using getBoundingClientRect() and adds .show when the element is within 150px of the bottom of the viewport:
home.html
const scrollElements = document.querySelectorAll(
    '.scroll-reveal, .scroll-left, .scroll-right'
);

const elementInView = (el, offset = 100) => {
    const elementTop = el.getBoundingClientRect().top;
    return elementTop <= (window.innerHeight - offset);
};

const displayScrollElement = (element) => {
    element.classList.add('show');
};

const handleScrollAnimation = () => {
    scrollElements.forEach(el => {
        if (elementInView(el, 150)) {
            displayScrollElement(el);
        }
    });
};

window.addEventListener('scroll', () => { handleScrollAnimation(); });
window.addEventListener('load', () => { handleScrollAnimation(); });

​
Adding a new section with scroll animation

1

Choose a reveal class

Pick .scroll-reveal for a fade-in, .scroll-left for a slide from the left, or .scroll-right for a slide from the right.
2

Add the class to your section element

home.html
<section class="scroll-left wave-top wave-bottom">
  <!-- your new section content -->
</section>
The JavaScript selector already watches for all three classes, so no JS changes are needed.

​
Page fade-in

The <body> tag carries the fade-in class, which triggers a CSS opacity transition from 0 to 1 when the page first loads:
home.html
<body class="fade-in">
To remove the page-load fade, delete fade-in from the body tag.

​
Wave section borders

.wave-top and .wave-bottom add decorative SVG wave borders to the top and bottom edges of a section using CSS ::before and ::after pseudo-elements. They are purely visual and can be removed from any section’s class list without affecting functionality.

​
Ocean background animations

The .ocean-pro container holds three categories of animated elements, all driven by CSS @keyframes:

​
Bubbles

Five <span> elements inside .bubbles float upward from the ocean floor, fading out near the surface. Each span has a different animation-delay and animation-duration to stagger the rising effect:
home.html
<div class="ocean-pro">
  <div class="bubbles">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <!-- fish, aquarium... -->
</div>

​
Fish

Nine PNG fish images swim across the background. Each uses a compound class — .fish for shared properties plus .fish1 through .fish9 for individual position, speed, and path:
home.html
<img src="{% static 'assets/img/fish1.png' %}" class="fish fish1" alt="">
<img src="{% static 'assets/img/fish2.png' %}" class="fish fish2" alt="">
<!-- ... fish3 through fish9 -->
To change a fish’s speed, find the @keyframes rule for .fish1 (etc.) in estilo.css and adjust the animation-duration value.

​
Seaweed and plants

The .aquarium div sits at the bottom of .ocean-pro and contains four seaweed clusters and five plant clusters. Each sways using a CSS @keyframes rotate/translate animation:
home.html
<div class="aquarium">
  <div class="seaweed phaeo1">
    <span></span><span></span><span></span><span></span><span></span>
  </div>
  <div class="seaweed phaeo2">
    <span></span><span></span><span></span><span></span>
  </div>
  <div class="seaweed phaeo3">
    <span></span><span></span><span></span>
  </div>
  <div class="seaweed phaeo4">
    <span></span><span></span>
  </div>
  <div class="plant plant1"><span></span><span></span><span></span></div>
  <!-- plant2 through plant5 -->
</div>
Each <span> represents a segment of the seaweed/plant stalk. Removing spans shortens the plant; adding them lengthens it (no CSS changes required). The hero carousel at the top of the page is a custom implementation in static/assets/js/carrusel.js. It cycles through three slides inside .carousel-track, advancing automatically every 5000ms via setInterval:
carrusel.js
// Auto-play every 5s
setInterval(() => {
  slideIndex = (slideIndex + 1) % slides.length;
  updateCarousel();
}, 5000);
Navigation is also available via .carousel-btn.next / .carousel-btn.prev (arrow buttons) and .carousel-dots. To change the auto-advance speed, update the 5000 ms value. To disable autoplay entirely, remove or comment out the setInterval call. The dish menu carousel and promotions carousel both use Owl Carousel 2. Their autoplayTimeout values are set in the inline script in home.html:
home.html
// Menu carousel — advances every 3500ms
$(".menu-carousel").owlCarousel({
  loop: true,
  margin: 25,
  nav: true,
  dots: true,
  autoplay: true,
  autoplayTimeout: 3500,
  responsive: {
    0:    { items: 1 },
    600:  { items: 2 },
    1000: { items: 3 }
  }
});

// Promotions carousel — advances every 4000ms
$(".promo-carousel").owlCarousel({
  loop: true,
  margin: 25,
  nav: true,
  dots: true,
  autoplay: true,
  autoplayTimeout: 4000,
  responsive: {
    0:    { items: 1 },
    768:  { items: 2 }
  }
});
Increase autoplayTimeout (milliseconds) to slow down cycling, or set autoplay: false to stop it entirely.

​
Disabling animations for performance or accessibility

Remove the scroll detection script from home.html, then add .show directly to every section that currently uses .scroll-reveal, .scroll-left, or .scroll-right — this keeps the visible final state without any transition.
Remove the entire .ocean-pro block from the HTML, or add animation: none !important; to .bubbles span, .fish, .seaweed span, and .plant span in estilo.css.
Wrap all keyframe-driven animations in a media query so users who have requested reduced motion in their OS settings are not affected:
estilo.css
@media (prefers-reduced-motion: reduce) {
  .bubbles span,
  .fish,
  .seaweed span,
  .plant span {
    animation: none;
  }

  .scroll-reveal,
  .scroll-left,
  .scroll-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
The prefers-reduced-motion approach is the recommended accessibility practice. It preserves animations for users who want them while respecting the system preference for those who do not.

Build docs developers (and LLMs) love

Get started for freeTalk to us