• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Портал карусель

Разработка Портал карусель

Нет прав для скачивания
Портал карусель.
Весьма простой в реализации и состоит только из jquery:
JavaScript:
// imports
const { Component, Fragment, PureComponent } = React;
const { css, injectGlobal, keyframes, default: styled } = styled;

// filler text from http://saganipsum.com/
// was using random images from https://spaceholder.cc/,
// but reqs were wayyy too slow... switched to unsplash
const DATA = [{
  title: 'Paroxysm of Global Death',
  description: 'Emerged into consciousness permanence of the stars citizens of distant epochs hearts of the stars encyclopaedia galactica of brilliant syntheses. Tendrils of gossamer clouds star stuff harvesting star light concept of the number one tendrils of gossamer clouds muse about dream of the mind\'s eye.',
  photo: 'https://source.unsplash.com/vltMzn0jqsA/900x900'
}, {
  title: 'Pale Blue Dot',
  description: 'With pretty stories for which there\'s little good evidence courage of our questions descended from astronomers globular star cluster invent the universe the only home we\'ve ever known and billions upon billions upon billions upon billions upon billions upon billions upon billions.',
  photo: 'https://source.unsplash.com/8Hjx3GNZYeA/900x900'
}, {
  title: 'Ash of Stellar Alchemy',
  description: 'Birth from which we spring vastness is bearable only through love the only home we\'ve ever known gathered by gravity ship of the imagination? With pretty stories for which there\'s little good evidence bits of moving fluff stirred by starlight citizens of distant epochs paroxysm of global death the sky calls to us?',
  photo: 'https://source.unsplash.com/rTZW4f02zY8/900x900'
}, {
  title: 'Star Light Consciousness',
  description: 'Rich in mystery great turbulent clouds hundreds of thousands muse about concept of the number one muse about. Not a sunrise but a galaxyrise citizens of distant epochs Sea of Tranquility extraordinary claims require extraordinary evidence two ghostly white figures in coveralls and helmets are soflty dancing a mote of dust suspended in a sunbeam.',
  photo: 'https://source.unsplash.com/Yj1M5riCKk4/900x900'
}];

const Carousel = styled.div`
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  padding: 16px;
  max-width: 800px;
`;

const TextList = styled.ul`
  position: relative;
  display: block;
  flex: 1 1 60%;
  list-style: none;
  margin: 0;
  padding: 0;
`;

const TextItem = styled.li`
  position: absolute;
  display: block;
  top: 0;
  left:0;
  padding-right: 16px;
  transform: ${({ active }) => active
    ? 'translate3d(0, 0, 0)'
    : 'translate3d(0, 64px, 0)'};
  opacity: ${({ active }) => active ? 1 : 0};
  transition: opacity 0.4s ease, transform 0.4s ease;
  transition-delay: ${({ active }) => active ? '0.2s, 0.2s' : '0.05s, 0.05s'};

  &:first-of-type {
    position:relative;
  }
`;

const ImageList = styled.ul`
  position: relative;
  list-style: none;
  flex: 1 1 40%;
  margin: 0;
  padding:0;
  cursor: pointer;

  &::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 20%;
    height: 100%;
    width: 60%;
    border-bottom: 1px solid #000;
    opacity: 0;
  }

  &:focus {
    outline: none;

    &::after {
      opacity: ${({ active }) => (active ? 0 : 0.75)};
    }
  }
`;

const ImageItem = styled.li`
  position: absolute;
  display: block;
  top: 0;
  left:0;
  border-radius: 50%;
  overflow: hidden;
  opacity: ${({ active }) => active ? 1 : 0};
  transition: opacity 0.4s ease;
  transition-delay: ${({ active }) => active ? '0.2s' : '0.05s'};

  &:first-of-type {
    position: relative;
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: #fff;
    transform: ${({ active }) => active
      ? 'scale3d(0, 0, 1)'
      : 'scale3d(1, 1, 1)'};
    transition: ${({ active }) => active
      ? 'none'
      : 'transform 0.2s ease'};
  }
`;

const ImageMask = styled.div`
  width: 200%;
  margin: -50%;
  border-radius: 50%;
  overflow: hidden;
  transform: ${({ active }) => active
    ? 'scale3d(1, 1, 1)'
    : 'scale3d(0.01, 0.01, 1)'};
  transition: transform 0.4s cubic-bezier(0.66, 0.35, 0.66, 0.33) 0.2s;
  backface-visibility: hidden;
  perspective: 1000px;
`;

const Image = styled.img`
  display: block;
  width: 100%;
  height: auto;
  transform: ${({ active }) => active
    ? 'scale3d(0.5, 0.5, 1)'
    : 'scale3d(50, 50, 1)'};
  transition: ${({ active }) => active
    ? 'transform 0.4s cubic-bezier(0, 0.84, 0, 0.98) 0.2s'
    : 'none'};
  backface-visibility: hidden;
  perspective: 1000px;
`;

const ThumbList = styled.ul`
  position: relative;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 16px 0;
`;

const ThumbItem = styled.li`
  display: block;
`;

const ThumbButton = styled.button`
  position: relative;
  height: 40px;
  width: 40px;
  background: ${({ url }) => url
    ? `center / contain url('${url}')`
    : 'none'};
  border: none;
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
  transform: scale3d(0.75, 0.75, 1);
  transition: transform 0.2s ease;

  &::before,
  &::after {
    content: '';
    position: absolute;
    height: 100%;
  }

  &::before {
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 50%;
    filter: grayscale(100%) brightness(110%);
    background: ${({ url }) => url
      ? `center / contain url('${url}')`
      : 'none'};
    opacity: ${({ active }) => active ? 0 : 1};
    transition: opacity 0.4s ease;
  }

  &::after {
    top: 8px;
    left: 20%;
    width: 60%;
    border-bottom: 1px solid #000;
    opacity: 0;
  }

  &:hover {
    transform: scale3d(1, 1, 1);
  }

  &:focus {
    outline: none;

    &::after {
      opacity: ${({ active }) => (active ? 0 : 0.75)};
    }

    &:active::after {
      opacity: 0;
    }
  }
`;

class App extends PureComponent {
  state = {
    activeIndex: 0
  }

  handleAdvance = () => {
    const { items } = this.props;
    
    this.setState(({ activeIndex }) => ({
      activeIndex: (activeIndex + 1) % items.length
    }));
  }
 
  handleGoToIndex = index => {
    this.setState({
      activeIndex: index
    });
  }
 
  handleAdvanceKeyPress = ({ key }) => {
    if (key === 'Enter') {
      this.handleAdvance();
    }
  }

  render() {
    const { activeIndex } = this.state;
    const { items } = this.props;

    return (
      <Carousel>
        <TextList>
          {items.map((e, i) => (
            <TextItem active={activeIndex === i} key={i}>
              <h2>{e.title}</h2>
              <p>{e.description}</p>
            </TextItem>
          ))}
        </TextList>
        <ImageList
          onClick={this.handleAdvance}
          onKeyPress={this.handleAdvanceKeyPress}
          aria-role="button"
          tabIndex="0">
          {items.map((e, i) => (
            <ImageItem active={activeIndex === i} key={i}>
              <ImageMask active={activeIndex === i}>
                <Image
                  active={activeIndex === i}
                  src={e.photo}
                />
              </ImageMask>
            </ImageItem>
          ))}
        </ImageList>
        <ThumbList>
          {items.map((e, i) => (
            <ThumbItem key={i}>
              <ThumbButton
                active={activeIndex === i}
                aria-label={`Go to slide ${i + 1}`}
                onClick={() => this.handleGoToIndex(i)}
                url={e.photo}
              />
            </ThumbItem>
          ))}
        </ThumbList>
      </Carousel>
    )
  }
}

// global styles (body etc...)
injectGlobal`
  html {
    box-sizing: border-box;
  }

  *, *:before, *:after {
    box-sizing: inherit;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
    background: linear-gradient(45deg, #ece9e6, #ffffff);
  }
`;

// add mounting point, mount, and render <App />
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App items={DATA} />, app);
Смотрим результат:
45w13.gif
  • Мне нравится
Реакции: Halk
Автор
baltun
Скачиваний
0
Просмотры
281
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

  • Font Awesome Manager
    Font Awesome Manager
    Позволяет использовать только шрифты которые необходимы XenForo.
  • [OzzModz] Badges
    [OzzModz] Badges
    покажите всем что пользователь онлайн или оффлайн выставив этот статус на полэкрана в постбит.
  • [Liam W.] Conversation Folders
    [Liam W.] Conversation Folders
    Папки для переписок.
  • s9e Media Sites
    s9e Media Sites
    Пак BB-кодов для вставки медиа контента.
  • Watermarker
    Бета Watermarker
    Водяные знаки для изображений.
Верх Низ